33. 对 BFC 的理解, 如何创建 BFC？

33. 对 BFC 的理解, 如何创建 BFC？

相关概念

• Box: Box 是 CSS 布局的对象和基本单位, ⼀个⻚⾯是由很多个 Box 组成的, 这个 Box 就是我们所说的盒模型
• Formatting context: 块级上下⽂格式化, 它是⻚⾯中的⼀块渲染区域, 并且有⼀套渲染规则, 它决定了其⼦元素将如何定位, 以及和其他元素的关系和相互作⽤

块格式化上下文(Block Formatting Context, BFC)是 Web 页面的可视化 CSS 渲染的一部分, 是布局过程中生成块级盒子的区域, 也是浮动元素与其他元素的交互限定区域。
通俗来讲: BFC 是一个独立的布局环境, 可以理解为一个容器, 在这个容器中按照一定规则进行物品摆放, 并且不会影响其它环境中的物品。如果一个元素符合触发 BFC 的条件, 则 BFC 中的元素布局不受外部影响。

创建 BFC 的条件

• 根元素: body
• 元素设置浮动: float 除 none 以外的值
• 元素设置绝对定位: position (absolute、fixed)
• display 值为: inline-block、table-cell、table-caption、flex 等
• overflow 值为: hidden、auto、scroll

BFC 的特点

• 垂直方向上, 自上而下排列, 和文档流的排列方式一致
• 在 BFC 中上下相邻的两个容器的 margin 会重叠
• 计算 BFC 的高度时, 需要计算浮动元素的高度
• BFC 区域不会与浮动的容器发生重叠
• BFC 是独立的容器, 容器内部元素不会影响外部元素
• 每个元素的左 margin 值和容器的左 border 相接触

BFC 的作用

• 解决 margin 的重叠问题: 由于 BFC 是一个独立的区域, 内部的元素和外部的元素互不影响, 将两个元素变为两个 BFC, 就解决了 margin 重叠的问题
• 解决高度塌陷的问题: 在对子元素设置浮动后, 父元素会发生高度塌陷, 也就是父元素的高度变为 0。解决这个问题, 只需要把父元素变成一个 BFC。常用的办法是给父元素设置 overflow: hidden
• 创建自适应两栏布局: 可以用来创建自适应两栏布局: 左边的宽度固定, 右边的宽度自适应

.left {
    width: 100px;
    height: 200px;
    background: red;
    float: left;
}

.right {
    height: 300px;
    background: blue;
    overflow: hidden;
}
1
2
3
4
5
6
7
8
9
10
11
12

<div class="left">div>
<div class="right">div>
1
2
3

左侧设置 float:left, 右侧设置 overflow: hidden。这样右边就触发了 BFC, BFC 的区域不会与浮动元素发生重叠, 所以两侧就不会发生重叠, 实现了自适应两栏布局。