最早听说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
网友评论