【深入理解CSS】BFC详解

什么是BFC？

块级格式化上下文（Block formatting context）是CSS对于一个页面进行可视化渲染时产生的区域，在这个区域中会产生被渲染的盒子模型、以及相互影响的浮动元素。

简单来说，就是BFC就是一种属性，影响着元素的定位，以及兄弟元素之间的相互影响。

如何触发BFC？

---根元素，即document就是一个BFC

---float属性的元素（除了none）

---定位的元素（absolute 或者fixed）

---inline-block的元素

---table-cell或table-caption

---overflow属性的元素（除了visible）

---flex 或者inline-flex

BFC有什么作用？

--BFC 会阻止外边距折叠

在一个嵌套的块级元素上设置外边距，父元素的外边距就会和子元素的外边距发生叠加。

<div class ="parent"><div class="child" style="margin-top:20px;height:30px;background:#eee"></div></div>

此次，父元素的外边距就会产生20px的外边距。

但是如果触发了BFC，就会阻止外边距叠加，如通过设置overflow:hidden来触发父元素的BFC。

<div class ="parent" style="overflow:hidden;"><div class="child" style="margin-top:20px;height:30px;"></div></div>

--BFC 可以包含浮动的元素

--BFC 可以阻止元素被浮动元素覆盖