BFC 是什么？
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
BFC的规则
- Box垂直方向的距离由margin决定。属于同一个BFC里的两个相邻Box的margin会发生重叠
- BFC的区域不会与float box重叠。
- 内部的Box会在垂直方向，一个接一个地放置
- BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。
- 如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。
- 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘
- 计算BFC的高度时，自然也会检测浮动盒子的高度，它是一个独立的渲染区域。
常见的能产生 BFC 的模式、
- 根元素（
<html>） - 浮动元素（元素的
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为flex或inline-flex元素的直接子元素）
BFC 的应用
- 解决外边距折叠。上下两个div布局时，上面元素的 margin-bottom 会和下面元素的 margin-top 重合取最大值。举例来说就是上面元素的 margin-bottom: 20px，下面元素的 margin-top: 10px。它们俩的间距并不会变成 30px，而是20px。要解决这个问题，只要分别使上下俩个元素都满足 BFC 模式，即，使得它们俩个都处于不同的BFC元素
- 清除浮动的副作用。容器内元素浮动，脱离了文档流，然后容器高度就坍塌了，所以只要让容器触发BFC模式，计算容器高度时就能把浮动元素也记录进去。还有左右相邻元素时，左元素浮动了，右边元素内部的行内元素会受到左边浮动元素的影响（最典型的就是文字环绕效果）。此时只要将右边元素触发BFC模式即可，因为BFC元素的内部布局不会受到BFC外部元素的影响。
网友评论