BFC详解

1 BFC

BFC（Block Formatting Context），块级格式化上下文，它规定了内部的块级元素的布局方式，默认情况下只有根元素（即body）⼀个块级上下文。

• BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响

• 可以通过一些条件触发BFC，从而实现布局上的需求或解决一些问题

• 可以将BFC想象成一个工具，无需探究其定义，只要着重理解其功能（特性）即可

1.1 BFC布局规则

• 内部的块级元素会在垂直方向，⼀个接⼀个地放置

• 块级元素垂直方向的距离由 margin 决定。属于同⼀个BFC的两个相邻的块级元素会发生 margin 合并；不属于同⼀个BFC的两个相邻的块级元素不会发⽣ margin 合并

• 每个元素的margin box的左边，与包含border box的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此

• BFC的区域不会与float box重叠

• BFC就是页面上的⼀个隔离的独立容器，容器⾥⾯的子元素不会影响到外⾯的元素；外⾯的元素也不会影响到容器⾥⾯的子元素

• 计算BFC的⾼度时，浮动元素也参与计算

1.2 创建⼀个BFC

⾸先我们要知道怎样创建BFC。⼀个BFC可以被显式触发，只需满⾜以下条件之⼀：

• float的值不为none;

• overflow的值不为visible;

• position的值为fixed / absolute;

• display的值为table-cell / table-caption / inline-block / flex / inline-flex。

特性：

• 属于同一个BFC的两个相邻容器的上下margin会重叠（重点）

• 计算BFC高度时浮动元素也参于计算（重点）

• BFC的区域不会与浮动容器发生重叠（重点）

• BFC内的容器在垂直方向依次排列

• 元素的margin-left与其包含块的border-left相接触

• BFC是独立容器，容器内部元素不会影响容器外部元素

1.3 BFC的应用

1.3.1 外边距折叠

在常规文档流中，两个兄弟盒子之间的垂直距离是由他们的外边距所决定的，但不是他们的两个外边距之和，⽽是以较⼤的为准。

<style>
    .container {
        overflow:hidden;
        width:100px;
        height:100px;
        background:red;
    }
    .box1 {
        height:20px;
        margin:10px 0;
        background:green;
    }
    .box2 {
        height:20px;
        margin:20px 0;
        background:blue;
    }
    .box3{
        overflow:hidden;
    }
</style>
<div class="container">
    <div class="box1"></div>
    <div class="box3">
        <div class="box2"></div>
    </div>
</div>

可以看到，第⼀个子盒子有上边距；两个子盒子的垂直距离为20px⽽不是30px，因为垂直外边距会折叠，间距以较⼤的为准。

那么如何让垂直外边距不折叠呢？

特性中提到：BFC就是页面上的⼀个独⽴容器，容器⾥⾯的子元素不会影响外⾯元素，同样外⾯的元素不会影响到BFC内的元素。所以就让box1或box2再处于另⼀个BFC中就⾏了。

1.3.2 计算BFC高度时浮动元素也参于计算

<style>
    .outside{
        border: 10px solid blue;
        overflow: hidden;
    }
    .inside{
        float: left;
        width: 200px;
        height: 200px;
        background: yellowgreen;
    }
</style>
<div class="outside">
    <div class="inside"></div>
</div>

• 父元素 .outside 没有设置高度且子元素 .inside 都浮动时，父元素 .outside 会出现高度塌陷

• 给父元素 .outside 添加声明 overflow: hidden;，父元素高度塌陷消失

• BFC特性规定“计算BFC高度时浮动元素也参于计算”，此时子元素 .inside 虽然设置了浮动，但其高度仍计算至父元素内，从而解决了高度塌陷问题。

1.3.3 阻止元素被浮动元素覆盖

两栏布局

<style>
    .left {
        float: left;
        width: 100px;
        height: 200px;
        background: yellowgreen;
    }
    .right {
        height: 300px;
        background: blue;
        overflow:hidden;
    }
</style>
<div class="left"></div>
<div class="right"></div>

• 正常情况下，左侧元素 .left 浮动时，会与右侧元素 .right 发生重叠，不能实现自适应两栏效果。

• 给右侧元素 .right 添加声明 overflow: hidden;，左右侧元素重叠消失，实现自适应两栏效果。

• BFC特性规定“BFC的区域不会与浮动容器发生重叠”，从而解决了重叠问题，实现自适应两栏效果。

三栏布局

<style>
    .left {
        float: left;
        width: 100px;
        height: 300px;
        background: yellowgreen;
    }
    .center {
        height: 300px;
        background: red;
        overflow: hidden;
    }
    .right {
        float:right;
        width: 100px;
        height: 300px;
        background: blue;
        overflow: hidden;
    }
</style>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

左右两边固定宽度，中间不设宽，因此中间的宽度⾃适应，随浏览器的⼤⼩变化⽽变化。

1.3.4 在垂直方向依次排列

<style>
    .outside {
        border: 10px solid blue;
    }
    .inside {
        width: 200px;
        height: 200px;
        background: yellowgreen;
    }
</style>
<div class="outside">
    <div class="inside"></div>
    <div class="inside"></div>
    <div class="inside"></div>
</div>

1.3.5 防止字体环绕

浮动的盒子会遮盖下⾯的盒子，但是下⾯盒子⾥的文字是不会被遮盖的，文字反⽽还会环绕浮动的盒子。这也是⼀个⽐较有趣的特性。

<style>
    .left {
        float: left;
        width: 100px;
        height: 100px;
        background: yellowgreen;
    }
    p {
        background: red;
        overflow: hidden;
    }
</style>
<div class="left"></div>
<p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>