BFC
-
什么是BFC?
BFC(Block Formatting Context)"块级格式化上下文"
它是一个独立的与外界隔离的渲染区域,它规定了内部的盒子如何布局 -
什么样的元素才能生产BFC
- display属性为inline-block/block/flex/table-cell/table-caption等
- float属性不为none
- position属性为absolute或fixed,相对定位除外
- overflow属性不为visible
-
具备生产BFC元素的特点?
有宽度高度,有外边距margin,有内边距padding,有边框border -
BFC排序规则
- 计算BFC高度时,自然也会检测浮动或者定位的盒子高度
- 内部盒子会在垂直方向,一个接着一个的排列
- 盒子垂直方向的距离由margin决定,属于同一个BFC的两个相邻盒子的margin会发生重叠
- BFC区域不会和float区域重叠
-
BFC主要应用场景
- 清除浮动
- 清除垂直方向margin层叠现象
网友评论