BFC

BFC规范(块级格式化上下文：block formatting context)

规定了内部的Block Box如何布局

• 内部的Box会垂直依次序排列
• 两个盒子的垂直距离由 margin 属性决定
• 属于同一个BFC的两个相邻Box的margin会发生重叠(取较大者的margin)
• BFC内部,每个元素的margin box的左边，与包含块border box的左边相接触(每个盒子的左外边缘接触内部盒子的左边缘)
• BFC的区域不会与float box重叠
• 计算BFC的高度时，浮动元素也会参与计算
• 隔离的独立容器，容器里面的子元素不会影响到外面的元素

触发BFC条件

• 根元素:html
• float值不为none
• overflow不为visible
• display的值为inline-block、table-cell、table-caption
• position的值为absolute或fixed