BFC - 特性、应用及 如何触发

1. BFC

BFC 即 Block Formatting Contexts (块级格式化上下文)

具有 BFC 特性的元素可以看作是隔离了的独立容器(独立的渲染区域)，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性

2. BFC的布局规则

1. 内部的Box会在垂直方向，一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）
3. 每个元素的margin box的左边， 与包含块border box的左边相接触
4. BFC的区域不会与float box重叠。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
6. 计算BFC的高度时，浮动元素也参与计算

3.触发 BFC

只要元素满足下面任一条件即可触发 BFC 特性：

• body 根元素
• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position (absolute、fixed)
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

4. BFC 特性及应用

1. 防止margin上下重叠（不同bfc 里的元素互不影响）

• margin塌陷 -- 同一个 BFC 里 外边距折叠不是 CSS 的 bug，我们可以理解为一种规范
• 如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中

<div class="container"> <!-- 都有margin的元素放在BFC容器里 -->
    <p></p>
</div>
<div class="container">
    <p></p>
</div>

.container {
    overflow: hidden; /*触发bfc*/
}
p {
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}

2. 清除浮动（BFC 可以包含浮动的元素）

<div style="border: 1px solid #000;overflow: hidden">  <!-- overflow: hidden 触发bfc,清除浮动 -->
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>

3. 自适应两栏布局 – BFC 不与浮动元素重叠

<!-- 文字环绕效果:第二个元素有部分被浮动元素所覆盖，(但是文本信息不会被浮动元素所覆盖) 如果想避免元素被覆盖，可触第二个元素的 BFC 特性-->
<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
<div style="width: 200px; height: 200px;background: #eee">我是一个没有设置浮动, 
也没有触发 BFC 元素,有部分被浮动元素所覆盖,但是文本信息不会被浮动元素所覆盖</div>

<!--自适应两栏布局-->
<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
<div style="height: 200px;background: #eee;overflow:hidden">我没有设置浮动, 但用overflow:hidden 触发了 BFC 元素, BFC 不与浮动元素重叠</div>

具体代码实现详见：10 分钟理解 BFC 原理

---

参考：

• BFC
• 前端面试题-BFC(块格式化上下文)