CSS中什么是BFC

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元素做相邻兄弟时候的表现。 如果是上面介绍的流体特性div, 当其和浮动元素当兄弟的时候，是覆盖的关系（可以脑补下文字环绕图片效果）。但是，元素BFC化后，本着“里面惊天抱诈（和谐）炸成鬼，外面依然泰然钓大鱼”的原则，自然是不会与浮动重叠的（你想啊，要是出来个clear:both还不跟外面浮动干上一架啊），因此，块状相邻，点击下面按钮感受下。