04_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特性

• 属于同一个 BFC 的两个相邻容器的上下 margin 会重叠（重点）
• 计算 BFC 高度时浮动元素也参于计算（重点）
• BFC 的区域不会与浮动容器发生重叠（重点）
• BFC 内的容器在垂直方向依次排列
• 元素的 margin-left 与其包含块的 border-left 相接触（X）
• 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

可以看到，第一个子盒子有上边距；两个子盒子的垂直距离为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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• 父元素 .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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• 正常情况下，左侧元素 .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="right">div>
<div class="center">div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

1.4 练习作业

1、实现两栏布局，三栏布局

2、实现文字环绕效果