BFC(Block formatting context)
- 直译为“块级格式化上下文”
BFC他是一个独立的渲染区域，只有Block-level box参与，他规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相关。
即为：孩子在家怎么折腾都行，但是出了家门，得乖，不能影响其他人。
1.元素的显示模式
- BFC为一个封闭的区域，里面的“块级元素”不管怎样浮动，怎样安排布局，但是一定不会影响区域以外的内容。（类似于清除浮动的目的就是为了不影响其他布局）
-
元素的显示模式有多种，display：block|none|inline|compact|等。但并不是所有的元素能产生BFC，首先它得是块级元素。
显示模式.jpg
2.哪些元素会具有BFC的条件
- display属性为block，list-item，table的元素，会产生BFC。同时我们也能发现这三个都是用来布局最为合理的元素，他们就是用来可视化布局的。
-
注意其他的display属性，比如line等，他们创建的是IFC，这里暂且不研究。
BFC有着具体的布局特性
3.什么情况下可以让元素产生BFC
- 当元素具有了BFC条件，只要具有以下属性就可以产生BFC。
- float属性不为none。
- position属性为absoulute或者fixed。
- display属性为inlin-block，table-cell，table-caption，flex，inline-flex。
- overflow属性不为visible。
4.BFC元素所具有的的特性
- 在BFC中，盒子从顶端开始垂直的一个接一个地排列。
- 盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻的盒子的margin会发生重叠。
- 在BFC中，每一个盒子的左外边距（margin-left）会碰道容器的左边缘（border-left）（对于从右到左的格式来说，则碰到右边缘）。
- BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。
- 计算BFC的高度时，自然也会检测浮动的盒子高度。
他是一个独立的渲染区域，只有Block-level box参与，他规定了内部的Block-level box如何布局，并且与这个区域外毫不相干。
5.BFC的主要用途
- 清除元素内部浮动
只要把父元素设为BFC就能清理子元素的浮动了，最常见的用法就是在父元素上设置overflow：hidden样式，对于IE6加上zoom：1就可以了。 -
根据特点：计算BFC的高度时，自然也会检测浮动的盒子高度。
当父级盒子没有设置高度，给子盒子添加浮动属性后，子盒子不占位置，父盒子失去高度
当给父盒子加上BFC后（添加float或者overflow：hidden），子盒子高度撑起父盒子高度
- 解决外边距合并
-
根据特点：盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻盒子的margin 会发生重叠。则创建不属于同一BFC的盒子，就不会发生margin重叠。
粉盒子下边距（50px）和紫盒子上边距（100px）重合，相距100px
给粉盒子套上一个父盒子且设置BFC，那么它与紫盒子不属于同一BFC盒子，边距不重叠为150px
- 制作右侧自适应盒子问题
-
根据特点：BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。
这里有两个盒子，给他们加上背景色
给粉色盒子加上浮动后
给紫色盒子添加BFC后
6.BFC总结（废话）
- BFC就是一个隔离的独立的容器。
- BFC外盒子不受影响。
- 使用该特性，使网页布局更加合理，且不会出现盒子不受控制的意外情况。
网友评论