一、什么是BFC?
BFC为Block formatting context的缩写,即“块级格式化上下文”。通俗来讲,它就是一个“隔离”起来的区域,外部的内容、构造与这个区域毫不相干,即它是一个独立的渲染区域,它规定了内部的Block-level Box(块级元素)如何布局。
二、BFC的布局规则
1. 内部的Box会在垂直方向一个接一个地放置。
2. Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻的垂直排列的Box的margin会发生重叠,并按照最大的margin值显示,即上面元素的margin-bottom值与下面元素的margin-top值并不是相加来显示,而是按照两者中最大的来显示。
3. 元素的左边距的边缘会与其包含块的左边框部分相接触。
4. BFC的区域不会与浮动元素的区域重叠
5. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响外面的元素。
6. 计算BFC的高度时,浮动元素也参与计算。例如,对于子元素浮动引起的高度塌陷问题,当给父元素添加overflow:hidden;就触发了BFC,这个元素就变成了一个BFC。
三、哪些元素和属性能触发BFC?
1. 根元素(html)
2. float属性不为none
3. position为absolute或fixed
4. display为inline-block,table-cell,table-caption,flex,inline-flex
5. overflow不为visible
四、 BFC的应用
1. 自适应两栏布局
2. 清除内部浮动
3. 防止margin上下重叠