BFC是什么？是清除浮动的一种方法

Posted 2020-09-20 Lois_slayer

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。

BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。所以，避免margin穿透啊，清除浮动什么的也好理解了。

什么时候会触发BFC呢？常见的如下：

• float的值不为none。
• overflow的值为auto,scroll或hidden。
• display的值为table-cell, table-caption, inline-block中的任何一个。
• position的值不为relative和static。

BFC和float元素做相邻兄弟时候会发现，普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文。如下截图：