什么是BFC
文档流
普通流
根据元素在html中的顺序，自上而下渲染页面。
行内元素自左向右渲染，行被占满则换行。
块级元素每一块都新增一行。
非普通流
浮动脱离文档流。
绝对定位脱离文档流，不会对其他元素产生影响。
Block Formatting Contexts (块级格式化上下文) 普通流
处于BFC的元素不会对外界元素影响。
触发BFC
- body 根元素
- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
如何利用BFC
- BFC元素不会与float元素重合
<div style="float: left; width:100px; height:100px; background: red">left</div>
<div style="overflow: hidden; background: pink; height: 100px">right</div>
image.png
- 清除浮动 撑开元素
<div style="width: 200px; border: 10px solid blue;">
<div style="float: left; width: 100px; height: 100px; background: red;">float</div>
</div>
image.png
将父级div设置为BFCoverflow: hidden
<div style="width: 200px; border: 10px solid blue;overflow: hidden">
<div style="float: left; width: 100px; height: 100px; background: red;">float</div>
</div>
image.png
- 边距重叠
在相同BFC中，块级元素的margin会重叠
