什么是浮动？#

浮动是 CSS 提供的一种布局机制，通过 float 属性，使元素向其包含块的左侧或右侧移动，并允许周围的行内内容环绕它。

1
.box {
2
  float: left;
3
}

float 常见属性值：

浮动元素会脱离普通文档流，但并不是完全不受布局规则约束。

浮动元素的特点#

浮动主要具有以下几个特点：

1. 脱离普通文档流：不再按照普通块级元素的布局方式占据空间。
2. 可以横向排列：多个浮动元素在空间足够时可以并排。
3. 具有文字环绕效果：周围的行内内容会避开浮动元素。
4. 受到布局规则约束：不能随意覆盖前面已经布局的元素。
5. 可能造成父元素高度塌陷：浮动元素不会按普通流的方式撑开父元素。

示例：浮动元素横向排列#

1
<div class="box">
2
  <div class="c1"></div>
3
  <div class="c2"></div>
4
  <div class="c3"></div>
5
</div>
6
.box {
7
  width: 600px;
8
  border: 1px solid #000;
9
}
10

11
.box > div {
12
  width: 200px;
13
  height: 200px;
14
  float: left;
15
}
16

17
.box .c1 { background: orange; }
18
.box .c2 { background: blue; }
19
.box .c3 { background: green; }

三个元素全部设置 float: left，并且父容器宽度足够，因此它们会横向排列。

如果取消 .c1 的浮动：

1
.box .c1 {
2
  float: none;
3
}

那么 .c1 会正常占据第一行，后面的 .c2 和 .c3 则在其下方浮动排列。

这是因为浮动元素虽然脱离普通文档流，但仍然受到前面元素位置的约束。这与后续的绝对定位的脱离文档流不一样

浮动与普通文档流的区别#

普通块级元素通常按照从上到下的顺序排列。

而浮动元素会向左或向右移动，直到遇到容器边界、其他浮动元素，或者受到布局规则的限制。

需要注意：脱离普通文档流，不等于脱离所有布局规则。

例如：

1
<div class="box">
2
  <div class="normal"></div>
3
  <div class="float"></div>
4
</div>
5
.normal {
6
  width: 200px;
7
  height: 200px;
8
  background: orange;
9
}
10

11
.float {
12
  width: 200px;
13
  height: 200px;
14
  background: blue;
15
  float: left;
16
}

蓝色盒子不会直接覆盖黄色盒子，而是从黄色盒子的下方开始浮动。但是，如果浮动元素后面出现普通块级元素，后者的盒子可能与浮动元素重叠，因为普通块级盒子的布局不会为浮动元素预留普通流空间。

上面说的是可能发生重叠，原因是：浮动元素脱离普通文档流，后面的普通块级盒子会忽略它占据的空间，但文字会避开它。主要区分是盒子还是文字

浮动实现文字环绕#

文字环绕是浮动最典型的使用场景。

1
<div class="box">
2
    <div class="c1"></div>
3
    <p>
4
        这是一段文章内容，当图片设置向左浮动后， 文字会自动围绕图片排列。
5
        当文字超过图片高度时，
6
        后面的文字会恢复占据完整的行宽。这是一段文章内容，当图片设置向左浮动后，
7
        文字会自动围绕图片排列。 当文字超过图片高度时，
8
        后面的文字会恢复占据完整的行宽。这是一段文章内容，当图片设置向左浮动后，
9
        文字会自动围绕图片排列。 当文字超过图片高度时，
10
        后面的文字会恢复占据完整的行宽。这是一段文章内容，当图片设置向左浮动后，
11
        文字会自动围绕图片排列。 当文字超过图片高度时，
12
        后面的文字会恢复占据完整的行宽。这是一段文章内容，当图片设置向左浮动后，
13
        文字会自动围绕图片排列。 当文字超过图片高度时，
14
        后面的文字会恢复占据完整的行宽。这是一段文章内容，当图片设置向左浮动后，
15
        文字会自动围绕图片排列。 当文字超过图片高度时，
16
        后面的文字会恢复占据完整的行宽。这是一段文章内容，当图片设置向左浮动后，
17
        文字会自动围绕图片排列。 当文字超过图片高度时，
18
        后面的文字会恢复占据完整的行宽。这是一段文章内容，当图片设置向左浮动后，
19
        文字会自动围绕图片排列。 当文字超过图片高度时，
20
        后面的文字会恢复占据完整的行宽。
21
    </p>
22
</div>
23
<style>
24
    * {
25
        margin: 0;
26
        padding: 0;
27
    }
28
    .box {
29
        width: 600px;
30
        height: 400px;
31
        border: 1px solid #000;
32
    }
33

34
    .box > div {
35
        width: 200px;
36
        height: 200px;
37
        float: left;
38
    }
39

40
    .box .c1 {
41
        background: orange;
42
    }
43

44
    .box p {
45
        border: 1px solid red;
46
        line-height: 20px;
47
    }
48
</style>

这里需要理解一个细节：

• p 的块级盒子不一定避开浮动元素。通过给p盒子加上边框可以观察到，p这个块级盒子，有一部分是被重叠的
• p 内部的文字行会避开浮动元素。
• 当文字排到浮动元素下方时，就能重新使用整行空间。

这也是为什么浮动能实现自然的图文混排。

什么是 BFC？#

BFC，全称 Block Formatting Context（块级格式化上下文）。

它是 CSS 视觉格式化模型中的一种布局机制，决定了内部块级盒子如何排列，以及如何与浮动元素交互。

可以简单理解为：

BFC 为内部元素建立了一套相对独立的块级布局环境。

它不是一个 CSS 属性，而是一种由特定条件触发的布局机制。

BFC 的主要特点#

需要注意，BFC 并不是完全隔离所有 CSS 行为。

例如，字体和颜色等可继承属性，仍然可以从父元素继承。

如何触发 BFC？#

常见方式如下：

注意：Flex 和 Grid 虽然也会建立独立的布局上下文，但它们不是 BFC。

示例：使用 flow-root 创建 BFC#

1
<div class="box">
2
  <div class="child"></div>
3
</div>
4
.box {
5
  display: flow-root;
6
  border: 1px solid black;
7
}
8

9
.child {
10
  width: 200px;
11
  height: 200px;
12
  background: orange;
13
  float: left;
14
}

虽然 .child 设置了浮动，但 .box 仍然能够包含浮动元素的高度。这是 flow-root 的重要用途。

BFC 如何避免外部浮动？#

1
<div class="left"></div>
2
<div class="right">
3
  这里是右侧内容
4
</div>
5
.left {
6
  width: 200px;
7
  height: 150px;
8
  float: left;
9
  background: orange;
10
}
11

12
.right {
13
  display: flow-root;
14
  background: lightblue;
15
}

.right 建立了 BFC，因此它的边框盒会避开左侧的浮动元素。如果剩余空间不足以容纳 .right，它可能被放置到浮动元素下方。这与普通块级盒子可能延伸到浮动元素后面的行为不同。

BFC 与浏览器差异#

早期浏览器对 CSS 浮动、BFC 和元素尺寸的处理存在较多兼容性问题。

其中比较典型的是旧版 Internet Explorer 的 hasLayout 机制。

在 IE6、IE7 中，开发者有时使用：

1
.box {
2
  zoom: 1;
3
}

触发 hasLayout，从而解决部分浮动和布局异常。但是必须注意：**hasLayout** **并不等于 BFC。**它们是不同的布局机制，只是某些表现存在相似之处。对于现代 Chrome、Firefox、Safari 和 Edge，通常不需要再使用这些旧浏览器兼容技巧。

实际开发中优先使用：

1
.box {
2
  display: flow-root;
3
}

不过，BFC 的具体行为仍然要遵循 CSS 布局规范，不能将它理解成万能的样式隔离机制。

为什么需要清除浮动？#

先看一个示例：

1
<div class="box">
2
  <div class="child"></div>
3
</div>
4
.box {
5
  border: 2px solid black;
6
}
7

8
.child {
9
  width: 200px;
10
  height: 200px;
11
  background: orange;
12
  float: left;
13
}

此时 .child 脱离普通文档流，父元素 .box 不会按照普通块级子元素的方式计算它的高度。

因此，父元素可能出现高度塌陷。

所谓高度塌陷，就是：

父元素没有被内部浮动元素撑开，导致高度小于预期。

这可能造成后续元素布局异常、背景显示范围不正确，以及边框无法包围浮动元素等问题。

clear 属性#

CSS 提供 clear 属性控制元素是否必须避开前面对应方向的浮动元素。

示例：

1
<div class="box">
2
  <div class="child"></div>
3
  <div class="clear"></div>
4
</div>
5
.child {
6
  width: 200px;
7
  height: 200px;
8
  background: orange;
9
  float: left;
10
}
11

12
.clear {
13
  clear: both;
14
}

.clear 会被放置到前面浮动元素的下方。

因为它仍然处于普通文档流中，父容器能够获得相应高度。

但这种方式需要额外添加一个没有实际语义的 HTML 元素，因此并不推荐。

使用伪元素清除浮动#

传统开发中经常使用 ::after 实现清除浮动。

1
.clearfix::after {
2
  content: "";
3
  display: block;
4
  clear: both;
5
}

使用方式：

1
<div class="box clearfix">
2
  <div class="child"></div>
3
</div>

它的原理是：

1. 使用 ::after 创建一个伪元素。
2. 伪元素作为父元素内部的最后一个子盒子。
3. clear: both 使其避开前面的浮动元素。
4. 父元素因此能够包含相应的高度。

这种方案不需要增加额外的 HTML 标签，兼容性也比较好。

使用 overflow 清除浮动#

1
.box {
2
  overflow: hidden;
3
}

overflow: hidden 能够建立 BFC，使父元素包含内部浮动元素的高度。

但存在一个问题：

超出容器的内容可能被裁剪。

例如，下拉菜单、阴影、绝对定位的装饰等溢出内容可能受到影响。

因此，不应该为了清除浮动而无条件使用 overflow: hidden。

使用 flow-root 解决高度塌陷#

现代开发中，更推荐使用：

1
.box {
2
  display: flow-root;
3
}

它具有几个优点：

• 创建 BFC。
• 包含内部浮动元素的高度。
• 不需要额外 HTML 元素。
• 不会像 overflow: hidden 一样主动裁剪溢出内容。
• 语义明确，专门用于建立新的块级格式化上下文。

需要区分两个概念：

**clear: both** 是清除前面浮动对自身位置的影响；**display: flow-root** 是通过创建 BFC，让容器包含内部浮动元素。

两者可以解决一些相似的布局问题，但原理并不相同。

清除浮动方案对比#

示例代码：

额外元素 + clear: both（不推荐）

1
<div class="box">
2
  <div class="child"></div>
3
  <div class="clear"></div>
4
</div>
5
.box {
6
  border: 1px solid black;
7
}
8
.child {
9
  width: 200px;
10
  height: 200px;
11
  background: orange;
12
  float: left;
13
}
14
.clear {
15
  clear: both;
16
}

原理： 在浮动元素后面添加一个普通块级元素，使用 clear: both 让它移动到浮动元素下方，从而撑开父容器。

缺点： 需要增加没有实际语义的 HTML 标签。

::after + clear: both（传统推荐）

1
<div class="box clearfix">
2
  <div class="child"></div>
3
</div>
4
.box {
5
  border: 1px solid black;
6
}
7

8
.child {
9
  width: 200px;
10
  height: 200px;
11
  background: orange;
12
  float: left;
13
}
14

15
.clearfix::after {
16
  content: "";
17
  display: block;
18
  clear: both;
19
}

原理： 通过 ::after 在父元素内部创建一个伪元素，再利用 clear: both 撑开父容器。其实就是第一种方式的衍生，把标签换成伪元素了

优点： 不需要额外的 HTML 标签，兼容性好。

overflow: hidden（特定场景使用）

1
<div class="box">
2
  <div class="child"></div>
3
</div>
4
.box {
5
  border: 1px solid black;
6
  overflow: hidden;
7
}
8

9
.child {
10
  width: 200px;
11
  height: 200px;
12
  background: orange;
13
  float: left;
14
}

原理： overflow: hidden 会创建 BFC，使父元素在计算自动高度时包含内部浮动元素。

缺点： 超出容器的内容可能被裁剪，比如阴影、下拉菜单等。

display: flow-root（现代推荐）

1
<div class="box">
2
  <div class="child"></div>
3
</div>
4
.box {
5
  border: 1px solid black;
6
  display: flow-root;
7
}
8

9
.child {
10
  width: 200px;
11
  height: 200px;
12
  background: orange;
13
  float: left;
14
}

原理： 直接创建 BFC，使父元素在计算自动高度时包含内部浮动元素。

优点： 不需要额外标签或伪元素，也不会因为创建 BFC 而裁剪溢出内容。

记住两种原理即可：

• clear：让一个普通流中的盒子避开前面的浮动，借助它撑开父容器。
• BFC：让父容器在计算自动高度时包含内部浮动元素。