BFC

BFC

Block Formatting Context(块级格式化上下文)

一个元素拥有了BFC后，如同有了一个结界，形成具有包裹性的封闭块，不再影响外部元素

BFC的效果

• 不发生margin折叠
• 可以用来清除浮动的影响

触发BFC

• html根元素
• position不是static，relative这两个值
• float不为none
• display为table-cell，table-caption或者inline-block
• overflow为scroll，hidden或者auto

包裹性的封闭块： 元素宽度高度大小形成是为了包含内部的子元素

参考

• CSS世界
• Understanding Block Formatting Contexts in CSS