BFC 在布局中的应用

发表于

防止 margin 重叠（塌陷）

相邻 Box 垂直重叠

1
2
3
4
<div class="vertical-wrap">
    <p>BOX 1</p>
    <p>BOX 2</p>
</div>

BOX 1

BOX 2

两个 p 标签的 margin 为 40px，发生了 margin 重叠，中间距离为两个标签 margin 最大一个为标准，
如果将包裹两个标签的容器定义为一个 BFC，那么两个标签则不属于同一个 BFC，就不会发生 margin 重叠。

1
2
3
4
<div>
    <p>BOX 1</p>
    <div class="bfc"><p>BOX 2</p></div>
</div>

BOX 1

BOX 2

相邻 Box 水平重叠

1
2
3
4
5
<div class="horizontal-wrap">
    <div class="bg-f2dbf9"></div>
    <div class="bg-pink"></div>
    <div class="bg-green"></div>
</div>
LEFT
MIDDL
RIGHT

三个 BOX 在水平方向上发生了重叠，如果使每个 BOX 生成一个新的 BFC，则三个 BOX 不在同一个 BFC 下，便不会发生 margin 重叠

1
2
3
4
5
<div class="horizontal-wrap">
    <div class="bg-f2dbf9"></div>
    <div class="bg-f9dbe2"></div>
    <div class="bg-e2f9db"></div>
</div>
LEFT
MIDDL
RIGHT

嵌套元素重叠

1
2
3
4
5
6
<div class="squire bg-dbf9f2"></div>
<ul class="nest-wrap bg-dbe2f9">
    <li class="item bg-f2dbf9">1</li>
    <li class="item bg-f9dbe2">2</li>
    <li class="item bg-e2f9db">3</li>
</ul>
  • 1
  • 2
  • 3
要避免嵌套元素发生 margin 重叠，可以让 ul 元素生成 BFC

  • 1
  • 2
  • 3

清除内部浮动

为清除内部浮动，可以使父元素生成 BFC