BFC(块级格式化上下文)
块级格式化上下文(Block Formatting Context)
概念
BFC是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响容器外的元素摆放。如果一个元素符合触发BFC的条件,则BFC中的元素布局不受外部影响。
常见形成条件
左右浮动
绝对定位
flex布局
display属性为table-cell、table-caption、inline-block
overflow属性不为visible.
特点
相邻的两个BFC的margin不会重叠
BFC的高度包含内部浮动元素的高度
应用
解决margin折叠问题:将其中一个元素构造成BFC
解决float元素父容器高度塌陷:将父元素构造成BFC
参见:
Last updated