学习BFC的总结

最早听说BFC这个概念，大约是在2016年，距离现在差不多已经过去了4年。中间不知道重新又看过了多少遍，可是每次看过没多久差不多就忘记了，所以今天终于下定决心，将看到的知识点进行总结，以至于相同的内容不至于多次重复学习。今天，就将BFC的相关知识点进行总结。

BFC概念

BFC(Block formatting context),“块格式上下文”，它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC布局规则

• BFC是页面上独立的渲染区域，容器里面的子元素不会影响外部，外部的容器也不会影响内部的元素
• 容器内部的元素按照顺序垂直分布
• Box垂直方向的距离由margin决定，同属同一BFC的Box的上下margin会发生重叠
• 每个Box的左边与包含块的左边距对齐，即使浮动也不例外
• BFC容器区域不会与float Box发生重叠
• BFC容器的高度由其子元素决定，即使浮动元素也参与高度计算

BFC的条件

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