定义
块级格式化上下文简称BFC:规定了在该区域中,常规流块盒的布局方式
常规流块盒的布局特点
- 常规流块盒在水平方向上必须撑满包含块(即margin+border+padding+width在水平方向上必须撑满外层元素)
- 常规流块盒在包含块的垂直方向上依次摆放
- 常规流块盒若外边距无缝相连接,则进行外边距合并
- 常规流块盒的自动高度和摆放位置会无视浮动元素、定位元素
BFC的渲染区域
这个区域是由某个HTML元素创建,满足一定条件的元素才会在内部创建BFC区域
如何触发BFC(常见举例)
- 根元素会创建BFC,覆盖网页中的所有元素
- 浮动元素和绝对定位元素
- overflow不等于visible的块盒
- 内联块 (元素具有 display: inline-block)
元素触发BFC后的特点
- 创建BFC后,它的自动高度会计算浮动元素的高度
- 创建BFC后,它的子元素不会进行margin合并(处于不同BFC中的盒子的外边距是不可能合并的)
- 创建BFC后,该元素会形成一个独立的渲染区域,它的边框盒不会和浮动元素重合