- BFC(Block formatting context) "块级格式化上下文"
- BFC是一个封闭独立的渲染区域,规定内部的元素如何布局,并且与区域外部毫不相干。
- 不是所有的元素模式都能产生BFC,w3c 规范:
display 属性为 block, list-item, table 的元素,会产生BFC. - 要给这些元素添加如下属性就可以触发BFC。
-float属性不为none
-position为absolute或fixed
-display为inline-block, table-cell, table-caption, flex, inline-flex
-overflow不为visible
BFC元素所具有的特性
1.在BFC中,盒子从顶端开始垂直地一个接一个地排列.
2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
3.在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘)。
① BFC的区域不会与浮动盒子产生交集,而是紧贴浮动边缘。
②计算BFC的高度时,自然也会检测浮动或者定位的盒子高度。
BFC的主要用途
1. 清除元素内部浮动
只要把父元素设为BFC就可以清理子元素的浮动了。
最常见的用法:在父元素上设置overflow: hidden样式,对于IE6加上zoom:1。
主要用到:计算BFC的高度时,自然也会检测浮动或者定位的盒子高度。
2. 解决外边距合并问题
创建不属于同一个BFC,就不会发生margin重叠了。
方法:将上方的子盒子用一个盒子套起来,加上overflow: hidden;
这样原来的两个子盒子的margin就不会重叠了。
主要用到:盒子垂直方向的距离由margin决定,属于同一个BFC的两个相邻盒子的margin会发生重叠。
3. 制作右侧自适应的盒子问题
方法:给一个子盒子加overflow: hidden; 使得该盒子紧贴浮动盒子边缘。
主要用到:普通流体元素BFC后,为了和浮动元素不产生任何交集,顺着浮动边缘形成自己的封闭上下文。BFC的区域不会与浮动盒子产生交集,而是紧贴浮动边缘。