CSS 浮动：一场元素的 "越狱" 与 "招安" 大戏在前端布局的江湖里，浮动（float）绝对是个让人又爱又恨的角色。

在前端布局的江湖里，浮动（float）绝对是个让人又爱又恨的角色。它既能实现灵动的文字环绕效果，又能轻松搞定元素水平排列，但稍不留意就会引发 "高度塌陷" 这样的棘手问题。今天我们就顺着文档流、浮动布局、清除浮动、BFC 这条线索，彻底搞懂浮动的那些事儿。

一、文档流：元素的 "默认排队规则"

首先得明白什么是文档流 —— 这就像超市里的排队结账队伍，元素们默认按照 "从上到下、从左到右" 的顺序依次排列，每个元素都占据自己的一席之地，互不干扰。

比如块级元素（div、p、ul 等）会像一个个独立的箱子，每个箱子单独占一行；行内元素（span、a 等）则像排队的人，肩并肩站在同一行，直到排不下才换行。这就是浏览器默认的布局逻辑，简单直接但缺乏灵活性。

为了打破这种刻板的排列方式，CSS 设计了浮动布局。它就像给元素开了个 "特殊通道"，让元素可以脱离默认的排队队伍，跑到容器的左边或右边。

文字环绕效果这是浮动最经典的应用场景，就像报纸排版中图片和文字的关系。给图片设置浮动后，文字会自动环绕在图片周围，形成紧凑美观的布局。
```
img {
  float: left; /* 图片向左浮动 */
}
```
图片脱离了原来的文档流位置，而文字则乖巧地绕着图片排列，这正是浮动设计的初衷。
控制元素水平排列当需要让多个块级元素在同一行显示时，浮动也能派上大用场。
```
li {
  float: left; /* 多个li横向排列 */
  width: 300px;
  height: 100px;
}
```
原本会垂直堆叠的 li 元素，因为浮动变成了水平排列，轻松实现了横向布局。

浮动虽好，但有个让人头疼的问题 ——父元素高度塌陷。因为浮动元素会脱离文档流，父元素在计算自身高度时会 "无视" 这些浮动的子元素，就像父母看不到跑出家门的孩子一样。

如果 ul.list 的子元素 li 都设置了浮动，而父元素没有任何处理，ul 的高度会变成 0，仿佛子元素不存在一样。这就是典型的高度塌陷问题，会导致后续元素的布局错乱。

既然浮动会带来副作用，那就要想办法清除这些影响。业界总结出了 5 种清除浮动的方案，各有优劣：

直接给父容器设置高度（不推荐）就像给父元素画了个固定大小的框，强制规定它的高度：

 .list {
      height: 100px; /* 固定高度等于子元素高度 */
    }

这种方法简单粗暴，但致命缺点是缺乏灵活性。如果子元素高度变化（比如内容增减），父元素高度不会自动适应，很容易出现内容溢出或留白过多的问题。

在浮动元素末尾加空容器（不推荐） 给浮动元素后面加一个空的 div，专门用来清除浮动：

    <ul class="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <div class="clear"></div> <!-- 空容器 -->
    </ul>

    .clear {
      clear: both; /* 清除左右两侧浮动影响 */
    }

虽然能解决问题，但这个空 div 没有任何实际意义，纯属为了布局而存在，违背了语义化原则，就像为了撑场面请了个假人，不优雅。

伪元素清除法（推荐） 这是目前最常用的方案，利用 CSS 伪元素模拟一个空容器，既不污染 HTML 结构，又能有效清除浮动：

    .list::after {
      content: ""; /* 伪元素内容为空 */
      display: block; /* 让伪元素成为块级元素 */
      clear: both; /* 清除浮动 */
    }

就像给父元素装了个 "隐形清洁工"，默默处理浮动带来的问题。

被影响元素清除浮动（不推荐） 让受到浮动影响的后续元素自己清除浮动：

   h2 {
      clear: both; /* h2 不受前面浮动元素的影响 */
    }

这种方法会打乱元素间的正常间距，可能导致不必要的留白，就像后面的人要为前面人的插队行为买单，不太合理。

将父容器设为 BFC 容器（推荐） BFC 容器有个特殊能力：计算高度时会包含浮动的子元素。所以把父元素变成 BFC，就能自动解决高度塌陷问题：

    .list {
      overflow: hidden; /* 触发 BFC */
    }

通过overflow: hidden让 ul.list 成为 BFC，从而正确包裹住浮动的 li 元素。

说到 BFC（块级格式化上下文），它可不是专门用来清除浮动的，而是一个具有特殊渲染规则的 "隔离空间"，就像布局中的 "独立王国"。

满足以下任一条件的元素都会成为 BFC 容器：

BFC 内部的元素依然遵循 "从上到下、从左到右" 的排列规则。
解决 margin 重叠问题：普通容器中，父元素的 margin-top 会和子元素的 margin-top 重叠（就像两个磁铁吸在一起），而 BFC 容器能阻止这种重叠。BFC容器中的子元素的margin-top不会超出父容器（不会和父容器的margin-top重叠）
计算 BFC 容器高度时，会包含浮动子元素的高度（这也是它能清除浮动的原因）。

浮动布局就像一把双刃剑：用得好能实现灵活的排版效果，用不好就会引发布局错乱。掌握它的关键在于：