什么是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会重叠

原文链接