BFC 全称为“块级格式化上下文”，是 Web 页面中一种常见的渲染机制。
BFC 主要作用是定义了一个独立的渲染区域，该区域内部的元素布局不会影响到外部元素。在 BFC 中，每个元素的 margin box 的左边缘会与包含块的左边缘相接触，并且会在垂直方向上形成一个由内向外的边距折叠。此外，BFC 还可以防止浮动元素重叠，并且可以清除浮动。
触发BFC
在实际应用中，可以通过以下几种方式来创建 BFC：
- float 属性不为 none。
- position 属性为 absolute 或 fixed。
- display 属性为 inline-block、table-cell、flex、inline-flex、grid 或 inline-grid。
- overflow 属性不为 visible。
当我们需要实现一些复杂的布局时，可以通过创建 BFC 来解决一些常见的问题，例如清除浮动、避免边距折叠等。
父子margin塌陷
demo连接:jsbin.com/mimekugaqa/…
解决方法
触发父元素BFC的方法
- postiong:absolute
- display:inline-block
- over-flow:hidden
- flow:right/left
兄弟margin合并
容器内的兄弟元素, margin-top和margin-bottom 会合并(这是符合直觉的,兄弟margin合并解决了margin计算*2的问题)
解决方法:
通常不解决,我们将margin-bottom:100px,兄弟上下外边距加起来,就可以了.
