揭秘CSS浮动盒：掌握高度塌陷修复、文字环绕特效示艺的秘籍！！（重点秘籍！！）
一、浮动
1.概念
浮动（float）是使用率较高的一种定位方式。有时希望相邻块级元素的盒子左右排列（所有盒子浮动），或者希望一个盒子被另一个盒子中的内容所环绕（一个盒子浮动）做出图文混排的效果时，最简单的方法就是运用浮动属性使盒子在浮动方式下定位。它允许元素脱离常规的文档流，并浮动到其父元素的左侧或右侧，从而使其他内容围绕其周围布局。
2.语法格式
float:none|left|right- left：元素向左浮动，其他内容将围绕其右侧进行布局。
- right：元素向右浮动，其他内容将围绕其左侧进行布局。
- none：默认值，元素不浮动，将按照正常布局进行渲染。
（1）左浮动
第一个设置左浮动的盒子浮至浮层，其它设置左浮动的盒子紧跟其后，从左到右排列，直到放不下才换行。
运行代码如下：
<style>article{width: 500px;height: 600px;background-color:aquamarine;margin-bottom: 5px;}div{width: 200px;height: 100px;background-color: pink;margin: 5px;}#div2{background-color: tomato;float: left;}#div3{background-color:springgreen;float: left;}#div4{background-color:cornflowerblue;}#div5{background-color:yellow;}</style>
</head>
<body><article><div>盒子1</div><div id="div2">盒子2(浮动)</div><div id="div3">盒子3(浮动)</div><div id="div4">盒子4</div><div id="div5">盒子5</div></article>
</body>
</html>运行结果如下：
盒子2、3浮动起来了，脱离了文档流，进入浮层，盒子4.5自动递补盒子2的位置。因为浮动的弊端，盒子4的字体还在盒子5。或许这张图片有点难以理解浮层的效果，我们可以看下面这张图片。
（2）右浮动
第一个设置右浮动的盒子浮至浮层，其它设置左浮动的盒子紧跟其后，从右到左排列，直到放不下才换行
运行代码如下：
<style>article{width: 500px;height: 400px;background-color:aquamarine;margin-bottom: 5px;}div{width: 200px;height: 100px;background-color: pink;margin: 5px;}#div2{background-color: tomato;float: right;}#div3{background-color:springgreen;float: right;}#div4{background-color:cornflowerblue;}#div5{background-color:yellow;}</style>
</head>
<body><article><div>盒子1</div><div id="div2">盒子2(浮动)</div><div id="div3">盒子3(浮动)</div><div id="div4">盒子4</div><div id="div5">盒子5</div></article>
</body>
</html>运行结果如下：
3.盒子的优点：
所以出现了浮动这一特性来节省空间或是达到我们的期望的效果
4.浮动的特性
(1)脱离文档流 （脱标）点击可查看相关内容
盒子浮动后，将脱离其原本位置，文档流后面的元素会自动递补其位置
（2）浮动盒排布规则:
①向上向左或者向右排列
②若空间无法容纳，则先向下移动，直到高度足够后向左向右
③当前浮动盒的顶边，不得高于上一个浮动盒的顶边。
例如：
浮动前：
浮动后：
视频展示：
屏幕录制 2024-10-20 224131
（3）浮动的元素会具有行内块元素的特性
·任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性
5.浮动的缺点
（1）高度塌陷
当一个容器内的子元素都被设置为浮动时，容器的高度可能会塌陷，即容器的高度变为零，无法正确地包含浮动元素。这会导致布局混乱，影响后续元素的定位和显示。
（2）兄弟盒子文字环绕
盒子浮动后，文档流后面的兄弟盒子会自动递补其位置。其中，文本会非常敏感，将自动环绕浮动盒。（浮动机制的初衷）
二、清除浮动
1.概念
为了防止浮动溢出现象的出现而进行的CSS处理，叫做清除浮动。在CSS样式中，浮动（float）与清除浮动（clean）是相互对立的，使用清除浮动不仅能够解决页面错位的现象，还能解决子级元素浮动导致父级元素背景无法自适应子级元素高度的问题。
2.语法格式
clear：both /left /right- lelt：清除前面盒子左浮动的影响
- righ：清除前面盒子右浮动的影响
- both：不允许有浮动对象
3.为什么要清除浮动？
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。
如果父盒由于各种原因未设置高度， 子盒的浮动会导致父盒的高度塌陷。父盒高度塌陷后会影响父盒的兄弟盒的布局此时我们就可以使用 clear 属性。
4.结论：
实际就是给一个盒子添加清除浮动，避免高度塌陷影响布局。
例如：
清除浮动前：
清除浮动后：
为了方便理解我将空盒子div5背景色改为粉色方便理解。
盒子div5无实际显示效果，主要用于将父盒撑开，避免父盒塌陷影响其他的布局。
前端开发的原则是非必要并不改变HTML的结构，样式设计只通过CSS实现。
运行代码如下：
<style>article{width: 1500px;/* 如果父盒由于各种原因没有设置高度，子盒的浮动会导致父盒的高度塌陷父盒高度塌陷后，会影响父盒兄弟盒的布局*//* height: 600px; */background-color: gray;border: 5px black solid;}#div1{width: 200px;height: 50px;margin-bottom: 5px;border: 5px black solid;background-color: aqua;float: left;}#div2{width: 200px;height: 50px;margin-bottom: 5px;border: 5px black solid;background-color: red;float: left;}#div3{width: 200px;height: 50px;margin-bottom: 5px;border: 5px black solid;background-color: green;float: right;}#div4{width: 200px;height: 50px;margin-bottom: 5px;border: 5px black solid;background-color: blue;float: right;}footer{width: 1500px;height: 100px;border: 5px black solid;background-color: orange;}#div5{width: 300px;border: 5px pink solid;}</style>
</head>
<body><article><div id="div1">盒子1</div><div id="div2">盒子2(浮动)</div><div id="div3">盒子3(浮动)</div><div id="div4">盒子4(浮动)</div><!-- 下面这个div盒子没有实际效果主要用于撑开父盒，避免高度塌陷影响其他布局；其实，H5给他们提供了伪元素，我们可以利用伪元素代替下面这个盒子。前端开发的原则是：非必要不改变 HTML的结构，样式设计通过CSS实现 --><div style="clear:both;" id="div5"></div></article><section></section><section></section><footer>我是网页页脚，下面这个div盒子没有实际效果主要用于撑开父盒，避免高度塌陷影响其他布局；其实，H5给他们提供了伪元素，我们可以利用伪元素代替下面这个盒子。前端开发的原则是：非必要不改变 HTML的结构，样式设计通过CSS实现</footer>
</body>
</html>多编码实践，通过运行代码探索CSS浮层秘籍的深层奥秘！！！