“浮动布局就像是前端世界的漂流瓶，明明想让它安安静静地呆在沙滩上，结果一不小心就被海浪（文档流）冲得七零八落。”
一、浮动的前世今生
在网页布局的江湖中，float（浮动）绝对是个“老江湖”。它最初的使命其实很单纯：让文字环绕图片。想象一下，古早的新闻网站，图片优雅地嵌在段落旁边，文字像小鱼一样绕着图片游来游去，这就是float的初衷。
但前端工程师的脑洞是无穷的。既然float能让图片浮起来，那让一堆div、li也浮起来，岂不是能实现横向排列？于是，float被“发配”去做水平布局，开启了它的“打工生涯”。
二、float的“副作用”与“后遗症”
float虽然好用，但副作用也很明显。最经典的“副作用”就是：浮动元素的高度不会被父容器感知。这就像你家里有个“隐形人”，明明站在客厅里，家长却完全感知不到他的存在。
代码示例1：浮动元素高度塌陷
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
li {
float: left;
width: 300px;
height: 100px;
}
此时，ul的高度为0，后续元素会“飞”到ul的上面，场面一度十分尴尬。
你以为float只是让元素“漂”起来？不，它还会让父元素“消失”！
三、清除浮动的“江湖秘笈”
面对浮动带来的“塌陷危机”，前端前辈们发明了各种“清除浮动”的招式：
-
直接给父容器定高度
这就像是“头痛医头，脚痛医脚”，治标不治本。内容一变，高度就乱套。 -
在浮动元素后加一个空div，clear: both
俗称“尾巴法”，虽然能解决问题，但页面里多了很多莫名其妙的div，强迫症患者表示无法忍受。 -
伪元素清除浮动（推荐）
这是现代前端的主流做法，优雅又高效。.parent::after { content: ''; display: block; clear: both; }这样父容器就能“看见”自己的孩子了，家庭和谐，布局稳定。
-
BFC终极大法（Block Formatting Context）
只要让父容器成为BFC，浮动的“副作用”就会被一网打尽。BFC就像是CSS世界的“结界”，在里面的元素互不干扰，外面的风雨也吹不进来。
如何开启BFC？
overflow: hidden;display: flex;float: left;position: absolute;等等
只要你设置了这些属性之一，父容器就会自动开启BFC模式，浮动的孩子们再也不会“离家出走”了。
四、float与inline-block的“爱恨情仇”
有同学会问：“老师，除了float，inline-block也能实现横向排列啊！”没错，inline-block确实能让元素并排，但它有个“间隙问题”——元素之间会有神秘的空隙，就像牙缝里的芝麻，怎么都抠不掉。
解决办法：
- 父容器设置
font-size: 0;，让空隙消失得无影无踪。 - 当然，子元素要记得单独设置回正常字体大小，否则内容会“消失”。
五、BFC的“神秘力量”
BFC不仅能解决浮动塌陷，还能解决margin重叠等一系列“疑难杂症”。比如，子元素的margin-top不会和父元素的margin-top重叠，页面布局更加可控。
BFC的本质：
它是CSS渲染规则中的“独立小世界”，里面的元素不会影响外部，外部也不会影响里面。就像你在家里开了个“静音房”，外面的吵闹声再大，你也能安静敲代码。
六、实战案例串讲
1. 图片环绕文字
<img style="float: left; width: 200px; height: 200px;" src="...">
<p>文字内容环绕图片，float的最初使命。</p>
2. 横向排列的li
- 用float实现
- 用inline-block实现（注意间隙问题）
3. 清除浮动的多种姿势
- 伪元素法
- overflow: hidden法
- BFC法
4. BFC的“副作用”
- 父容器变成BFC后，margin不再重叠，浮动元素高度被包含，页面布局更稳健。
七、float的“退休生活”与现代布局
随着flex和grid的横空出世，float逐渐退出了主流布局的舞台。但float依然是前端面试的常客，也是理解CSS布局机制的“敲门砖”。
float的正确打开方式：
- 用于文字环绕图片
- 了解其历史和局限，遇到复杂布局优先用flex/grid
八、总结
float就像是前端世界的“老顽童”，虽然有点调皮，但只要你掌握了清除浮动和BFC的“秘籍”，它依然能在合适的场合大显身手。希望这篇文章能让你在浮动布局的江湖中，少走弯路，多点欢笑！
“人生苦短，float要善用。BFC在手，天下我有！”
