BFC回顾

很多人问我到底什么是BFC，这里统一解释。

BFC定义

BFC，中文翻译为格式化上下文，其定义是：浮动、绝对定位（绝对定位、固定定位）元素、块级容器（如inline-block、 table-cell、table-caption）还包括overflow属性值取值visible以外的块级盒子，会为它们的内容物创建一个新的块级格式化上下文。

对元素设置以下属性就可以生成BFC：

  float: left | right;

---

  overflow: hidden | auto | scroll;

---

  display: table-cell | table-caption | inline-block;

---

  position: absolute | fixed;

BFC的作用：

• 解决margin重叠问题。所谓margin重叠是指处于同一个BFC的相邻元素、嵌套元素，只要它们之间没有阻挡（如：边框、非空内容、padding等）就会发生margin重叠。这是只要让其中一个元素生成新的BFC就能解决margin重叠问题。

• 清除浮动。因为BFC可以包含浮动，所以让父容器生成新的BFC可以让父容器在视觉上包围了浮动的子元素，因而清除了浮动。