什么是BFC?
W3C对BFC的定义如下: 浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为"visiable"的块级盒子,都会为他们的内容创建新的BFC(Block Fromatting Context, 即块级格式上下文
)。
BFC的触发条件
1. 根元素html
2. float不为none
3. overflow不为visible
4. position为fixed或absolute
5. display为inline-block
6. display为flex或inline-flex
7. display为grid或inline-grid
8. display为table相关属性
BFC的渲染规则
- BFC垂直方向
边距重叠
- BFC不会和
浮动
元素的box重叠
- BFC是一个
独立的容器
,外面的元素不会影响
到里面的元素 - 计算BFC
高度
的时候浮动元素
也会参与计算
文章评论