BFC

理解BFC

BFC，全称“块级格式化上下文”（block formatting context），可以为元素提供一个独立的空间，将元素内部的内容与外部的上下文隔离开，不会相互影响。这种隔离为创建BFC的元素做了以下事情：

• 包含了内部所有元素的上下外边距，它们不会跟BFC外面的元素产生外边距折叠（内部元素与其创建BFC的容器之间也不会产生外边距折叠）；
• 包含了内部所有的浮动元素，有效解决了容器高度塌陷的问题；
• 不会跟BFC外面的浮动元素重叠。

 

如何触发

给元素添加以下的任意属性值都会创建BFC：

• float：left或right，不为none即可；
• overflow：hidden、auto或scroll，不为visible即可；
• display：inline-block、table-cell、table-caption、flex、inline-flex、grid或inline-grid；
• position：absolute或fixed；