BFC学习笔记
概念（来自MDN）
BFC即block formatting context(块级格式化上下文)，是 Web 页面的可视化 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
个人理解：在某些条件（形成BFC的条件）下，一个元素及其子元素拥有特定的渲染规则，此时我们称该元素形成一个BFC。
形成条件(满足以下任何一种即可)
-
根元素(html)
-
浮动元素（元素的 float 不是 none）
-
绝对定位元素（元素的 position 为 absolute 或 fixed）
-
overflow 值不为 visible 的块元素
-
display 为 inline-block flex grid table-cell 等（具体参见块格式化上下文）
BFC的渲染规则（和块级元素的区别）
-
属于同一个 BFC 内部的 box 的垂直 margin 会发生重叠
-
BFC 是个独立的容器，容器里面的子元素不会影响外面的元素，反之亦然
-
计算BFC的高度时，浮动元素也参与计算
理解 BFC 后可以解决的问题
- 阻止外边距重叠
HTML
<div class="box">
<div class="child"></div>
<div class="child"></div>
</div>
CSS
box {
width: 100vw;
background: skyblue;
}
.child {
margin: 10px;
width: 100px;
height: 100px;
background: deeppink;
}
此时两个 child 元素属于同一个 BFC（根元素html）内，根据 BFC 规则1，外边距会发生重叠。我们可以使他们在不同的 BFC 中，就不会重叠了
CSS
.child:last-child {
display: inline-block;
}
- 阻止元素和 float box 重叠
HTML
<div class="box">
<div class="child"></div>
<div class="child"></div>
</div>
CSS
box {
width: 100vw;
background: skyblue;
}
.child {
margin: 10px;
width: 100px;
height: 100px;
background: deeppink;
}
.child:first-child {
float: left;
}
根据 BFC 规则2，此时两个 child 会发生重叠，为了阻止重叠，我们可以为另一个非浮动元素创建 BFC
CSS
.child:last-child {
overflow: hidden;
}
- 清除浮动，防止容器高度塌陷
HTML
<div class="box">
<div class="child"></div>
<div class="child"></div>
</div>
CSS
box {
width: 100vw;
background: skyblue;
}
.child {
float: left;
width: 100px;
height: 100px;
background: deeppink;
}
此时容器 box 的高度为 0，因为浮动的元素不参与高度计算，造成了该容器高度塌陷。根据 BFC 规则3，可以利用 BFC 元素下的浮动元素参与高度计算来清除浮动。
CSS
box {
width: 100vw;
overflow: hidden;
background: skyblue;
}
- 可以利用 BFC 完成自适应两栏布局
HTML
<div class="box">
<div class="child"></div>
<div class="child"></div>
</div>
CSS
box {
width: 100vw;
background: skyblue;
}
.child {
height: 100px;
background: deeppink;
}
.child:first-child {
float: left;
width: 100px;
}
.child:;ast-child {
overflow: hidden;
}
实际也是利用了 BFC 规则2，BFC 元素不会和 float box 重叠
总结
其实我们在平常的工作中经常和 BFC 打交道，如外边距折叠，设置 overflow:hidden 清除浮动，自适应两列布局。但是很多人包括我自己对于 BFC 只是听说过概念，并不清楚其形成条件和渲染规则。今天通过写博客的方式让自己对其有了更清晰的认识，希望大家看完这篇文章后对 BFC 也可以有个清晰的了解和认识。其中若有错误的地方也希望可以帮忙指出。
参考
欢迎到前端学习打卡群一起学习～516913974
