【css】浅谈BFC

定义：

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

BFC的布局规则如下：

1.内部的盒子会在垂直方向，一个个地放置；
2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；
3.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
4.BFC的区域不会与float重叠；
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；
6.计算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 值为 flow-root 的元素
contain 值为 layout、content或 paint 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

资源：

1.浮动元素：float 除 none 以外的值。
2.绝对定位元素：position (absolute、fixed)。
3.display 为 inline-block、table-cells、flex。
4.overflow 除了 visible 以外的值 (hidden、auto、scroll)。

解决方案：

使用 overflow 来创建一个新的BFC，是因为 overflow 属性告诉浏览器你想要怎样处理溢出的内容。

案例

demo1:自适应两栏布局

我们先定义两个div：

<div class="aside"></div>
<div class="main"></div>

然后定义css：

div {
    width:300px;
}
.aside {
     float: left;
    width: 100px;
    height: 150px;
   
    background: black;
}
.main {
    height:200px;
    background-color:red;
}

效果图如下：

分析：

这正满足了规范的第三条：
每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此。
所以如果我们需要将黑色区域撑到红色的左边，就需要利用规范的第四条：
BFC的区域不会与float重叠。
也就是说我们需要创造BFC区域。我们通过将红色区域的overflow设为hidden来触发BFC：

.main {
    height:200px;
    overflow:hidden;
    background-color:red;
}

效果如下：

demo2:清除内部浮动

首先是父div套子div

<div class="parent">
    <div class="child"></div>
</div>

然后是css:

.parent {
    width:300px;
    border:1px solid black;

}
.child {
    float:left;
    width:100px;
    height:100px;
    border:1px solid red;
}

效果如下：

可以看到，父div压根就没有被撑开。
我们再回顾一下BFC规范中的第六条：
计算BFC的高度时，浮动元素也参与计算。

所以我们需要将父div触发为BFC，也就是将其overflow设为hidden：

.parent {
    width:300px;
    overflow:hidden;
    border:1px solid black;
}

效果如下：

可以看到父div已经撑开了。

demo3:margin重叠问题

先定义两个垂直的div：

<div class="p"></div>
<div class="p"></div>

然后定义margin:

.p {
    width:200px;
    height:50px;
    margin:50px 0;
    background-color:red;
}

可以看到margin重叠后的效果：

我们再看看BFC规范的第二条：
盒子垂直方向的距离由margin决定，属于用一个BFC的两个相邻Box的上下margin会发生重叠。
说明两者属于同一个BFC，所以我们需要两个div不属于同一个BFC。

为第二个div套一个父亲div，然后讲其overflow设为hidden来激活一个BFC就可以使margin不再重叠。

html:

<div class="p"></div>
<div class="wrap">
    <div class="p"></div>
</div>

css:

.wrap {
    overflow:hidden;
}

效果如下：

定义：

BFC的布局规则如下：

以下行为会触发BFC

解决方案：

案例

demo1:自适应两栏布局

demo2:清除内部浮动

demo3:margin重叠问题

相关资料：