1.概念
BFC(Box Formatting context ): Box是csS布局的对象和基本单位,BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
块级格式化上下文布局规则
* 内部的BOX会在垂直方向一个接一个的放置;
* 属于同一个BFC的两个相邻Box的margin会重叠;不同BFC就不会;
* 是页面上一个隔离的独立容器,里面的元素不会影响到外面的元素;反之亦然;
* BFC的区域不会和float box重叠;
* 计算BFC的高度,浮动元素也参与计算;
2.触发条件
触发条件简要概括:
* 根元素
* float属性不为none
* position为 absolute或fxed
* overflow不 为visible
* display为inline-block, table-cell, table-caption, flex, inline-flex.
触发条件详细介绍:
- 根元素
- 浮动元素(元素的float不是none)
- 绝对定位元素(元素的position 为absolute或fixed)
- 行内块元素(元素的display为inline- block)
- 表格单元格(元素的display为table- cell, HTML表格单元格默认为该值)
- 表格标题(元素的display为table- -caption,HTML表格标题默认为该值)
- 匿名表格单元格元素(元素的display为table、 table-row、table- -row- group、table -header- group、table- footer- -group (分 别是HTML table、row、tbody、thead、tfoot的默认属性)或inline-table)
- overflow 值不为visible 的块元素
- display 值为flow- -root 的元素
- contain 值为layout、 content或paint的元素
- 弹性元素(display为 flex或inline- -f1ex元素的直接子元素)
- 网格元素(display为 grid或inline- -grid元素的直接子元素)
- 多列容器(元素的column- count或column- -width 不为auto, 包括column- count为1)
- column- -span为all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一一个多列容器中(标准 变更,Chrome bug)。
3.应用场景
1、清除内部的浮动,触发父元素的BFC属性,会包含float元素;
防止浮动导致父元素高度塌陷父级设置overflow:hidden,元素float:right;
2、分属于不同的BFC,可以阻止Margin重叠;
避免margin重叠,两个块相邻就会导致外边距被折叠,给中 间的设置BFC就会避免,方法就是套个父级设置overflow: .hidden
3、阻止元素被浮动元素覆盖,各自是独立的渲染区域;
4、自适应两栏布局