哪些元素会生成BFC（可以通过以下任意合适的方式触发box生成BFC）?

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

---

BFC的约束规则:

• 内部的Box会在垂直方向上一个接一个的放置
• 属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷）
• 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
• BFC的区域不会与float的元素区域重叠
• 计算BFC的高度时，浮动子元素也参与计算
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然