CSS进阶04-块格式化上下文BFC

（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）
（注2：更多内容请查看我的目录。）

1. BFC定义

BFC的英文全称是：Block Formatting Contexts，直译为“块格式化上下文”。
BFC是Web页面的可视化CSS渲染的部分，是块级盒布局发生的区域，也是浮动元素与其他元素交互的区域。

2. BFC生成

CSS2.2文档中注明，满足下列条件之一，会为其内容建立新的块格式化上下文BFC：

浮动，即float的值不为none。
绝对定位的元素，position的值为absolute或fixed
不是块盒的块容器。诸如行内块inline-blocks，表单元格table-cells和表标题table-captions。即 display的值为table-cell, table-caption, inline-block中的任何一个。
overflow值不为visible的块盒。(除非该值被传播到视口viewport)

然后，MDN中注明，如下条件会产生BFC（这里我直接放英文原版）：

A block formatting context is created by one of the following:

the root element or something that contains it

floats (elements where float is not none)

absolutely positioned elements (elements where position is absolute or fixed)

inline-blocks (elements with display: inline-block)

table cells (elements with display: table-cell, which is the default for HTML table cells)

table captions (elements with display: table-caption, which is the default for HTML table captions)

anonymous table cells implicitly created by the elements with display: table, table-row, table-row-group, table-header-group, table-footer-group (which is the default for HTML tables, table rows, table bodies, table headers and table footers, respectively), or inline-table

block elements where overflow has a value other than visible

display: [flow-root](https://drafts.csswg.org/css-display/#valdef-display-flow-root)

elements with contain: layout, content, or strict

flex items (direct children of the element with display: flex or inline-flex)

grid items (direct children of the element with display: grid or inline-grid)

multicol containers (elements where column-count or column-width is not auto, including elements with column-count: 1)

column-span: all should always create a new formatting context, even when the column-span: all element isn't contained by a multicol container (Spec change, Chrome bug).

发现新增了很多情况。这里只讨论CSS2.2中所列条件，当然CSS2.2中root默认也会生成BFC（不过我一直没找到文档中的出处，如果有找到的同学还请不吝赐教），但是body默认是不生成BFC的。

3. BFC渲染规则

CSS2.2中规定BFC具有如下特征：

在一个块格式化上下文中，盒从包含块顶部开始一个接一个地垂直摆放。两个同胞盒间的垂直距离取决于 margin 属性。同一个块格式化上下文中的相邻块级盒的垂直外边距将折叠。
在一个块格式化上下文中，每个盒的左外边缘紧贴包含块的左边缘（从右到左的格式里，则为盒右外边缘紧贴包含块右边缘），即使有浮动参与也是如此（尽管盒里的行盒可能由于浮动而收缩），除非盒创建了一个新的块格式化上下文（在这种情况下盒子本身可能由于浮动而变窄）。

下面，我们详细举例说明这两条规则：

3.1 在一个块格式化上下文中，盒从包含块顶部开始一个接一个地垂直摆放。两个同胞盒间的垂直距离取决于 margin 属性。同一个块格式化上下文中的相邻块级盒的垂直外边距将折叠。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.1-1</title>
    <style>
        div {
            background-color: green;
            height: 30px;
            margin: 15px;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>

3.1-1

如图，三个div生成的块盒在root生成的BFC下，其包含块是body的content box（就是body的content edge生成的块），三个div块从body的content box顶部往下依次排列。三者间被margin隔开。但是由于三者处于同一个BFC，margin产生了折叠（折叠的情况比较复杂，我会开单章详细说明），间距不是30px而是15px。

3.2在一个块格式化上下文中，每个盒的左外边缘紧贴包含块的左边缘（从右到左的格式里，则为盒右外边缘紧贴包含块右边缘），即使有浮动参与也是如此（尽管盒里的行盒可能由于浮动而收缩），除非盒创建了一个新的块格式化上下文（在这种情况下盒子本身可能由于浮动而变窄）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.2-1</title>
    <style>
        div {
            background-color: green;
            height: 30px;
            margin: 15px;
        }
        .fl {
            float: left;
        }
        .div4 {
            background-color: red;
            height: 20px;
        }
    </style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div class="fl div4">float-left</div>
<div id="div3">div3</div>
</body>
</html>

3.2-1

可以看到，id为div1，div2和div3的三个div生成的块盒在root生成的BFC下，每个盒的左外边缘紧贴其包含块(body的content box)的左边缘。内容为float-left的div虽然把div3内容向右挤开了一段距离（原因是浮动导致id为div3的盒内的行盒收缩），但是id为div3的盒的左外边缘仍然紧贴其包含块的左边缘。

不过值得注意的是此时内容为float-left的块盒由于浮动脱离了标准流，此时不再与div2的margin发生折叠，所以对于3.1的折叠发生条件，应该至少还要加一个前提，就是相邻块级盒需要在标准流内。

另外，我们看看，如果此时使id为div3的盒生成新的BFC呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.2-2</title>
    <style>
        div {
            background-color: green;
            height: 30px;
            margin: 15px;
        }
        .fl {
            float: left;
        }
        .div4 {
            background-color: red;
            height: 20px;
        }
    </style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div class="fl div4">float-left</div>
<div id="div3" class="fl">div3</div>
</body>
</html>

3.2-2

可以看到div3由于浮动生成了新的BFC，会导致盒的左外边缘不再紧贴其包含块的左边缘，并且由于浮动，其本身宽度变窄了。

4. BFC用途

4.1 BFC可以阻止元素被浮动元素覆盖（防止高度坍塌）。

盒的宽高其实是有着很复杂的计算方法，这一点我们在CSS进阶系列后面的文章中详细说明。这里我们来看一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4.1-1</title>
    <style>
        .div1 {
            height: 50px;
            background-color: gray;
        }
        .outer {
            border: 3px solid red;
        }
        .fl {
            float: left;
        }
    </style>
</head>
<body>
<div class="outer">
    outer
    <div class="div1 fl">float-left</div>
</div>
</body>
</html>

4.1-1

我们发现outer的盒高度竟然没有其所包含的float-left的盒高度高，产生了高度塌陷。这是什么原因呢？这是因为对于

Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'

的高度，有

Only children in the normal flow are taken into account (i.e., floating boxes and absolutely positioned boxes are ignored, and relatively positioned boxes are considered without their offset).

就是说对于标准流中的块级非替换元素，如果其overflow最终计算结果为visible，那么高度只会考虑其在标准流中的子元素（比如，移动和绝对定位的盒子是会被忽略的，相对定位的盒子只会考虑其未被定位前的位置）。

那么，BFC如何清除浮动呢？看下面这个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4.1-2</title>
    <style>
        .div1 {
            height: 50px;
            background-color: gray;
        }
        .outer {
            border: 3px solid red;
        }
        .fl {
            float: left;
        }
    </style>
</head>
<body>
<div class="outer fl">
    outer
    <div class="div1 fl">float-left</div>
</div>
</body>
</html>

4.1-2

可以看到，如果设置outer的float属性不为none，会导致outer生成新的BFC，然后outer盒的在高度上能够包裹住float-left了。这是什么原理呢？

the height of an element that establishes a block formatting context is computed as follows:

If it only has inline-level children, the height is the distance between the top of the topmost line box and the bottom of the bottommost line box.

If it has block-level children, the height is the distance between the top margin-edge of the topmost block-level child box and the bottom margin-edge of the bottommost block-level child box.

Absolutely positioned children are ignored, and relatively positioned boxes are considered without their offset. Note that the child box may be an anonymous block box.

In addition, if the element has any floating descendants whose bottom margin edge is below the element's bottom content edge, then the height is increased to include those edges. Only floats that participate in this block formatting context are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.

这短话详细列举了生成BFC元素的高度计算规则，翻译成中文如下：

建立块格式化上下文的元素的高度按如下所述计算：

如果该元素只有行内级子元素，其高度为最上行盒的顶部到最下行盒的底部的距离。

如果该元素有块级子元素，其高度为最上块级子盒的上外边距边缘到最下块级子盒的下外边距边缘的距离。

绝对定位子元素会被忽略，相对定位盒不需要考虑其位移。注意子盒可能是匿名块盒。

此外，如果该元素有下外边距边缘低于该元素下内容边缘的浮动子元素，那么高度将增大来包含那些边缘。只有参与本块格式化上下文的浮动才考虑在内，比如，在绝对定位后代中的或者其他浮动中的浮动就不考虑。

4.2 BFC可以用来防止margin折叠。

看下面这个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4.2</title>
    <style>
        .div1 {
            margin: 10px;
            height: 30px;
            background-color: green;
        }
        .div2 {
            margin: 10px;
            height: 30px;
            background-color: blue;
        }
        .hidden {
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="div1">div1</div>
<div class="outer">
    <div class="div2">div2</div>
</div>
<div class="div1">div1</div>
<div class="outer hidden">
    <div class="div2">div2</div>
</div>
</body>
</html>

4.2

可以看到，div2即使包含在另一个块盒中，但是如果与div1在同一个BFC且相邻，一样会产生margin折叠。这时如果让div2处于一个新的BFC下，则其与处于另一个BFC下的div1不再会有margin折叠。

4.3 多栏布局(更多内容可以参考BFC与多列布局)

4.3.1 两栏布局

特点：侧边栏宽度固定，内容栏可以根据浏览器宽度自适应。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4.3.1</title>
    <style>
        body {
            width: 100%;
        }

        .aside {
            width: 100px;
            height: 150px;
            float: left;
            background: grey;
        }

        .content {
            height: 200px;
            overflow:hidden;
            background: blue;
        }
    </style>
</head>
<body>
<div class="aside"></div>
<div class="content"></div>
</body>
</html>

4.3.1

4.3.2 三栏布局

特点：两侧宽度固定，中间内容栏可以根据浏览器宽度自适应。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4.3.2</title>
    <style>
        body {
            width: 100%;
        }
        .left {
            width: 100px;
            height: 150px;
            float: left;
            background: grey;
        }

        .content {
            height: 200px;
            overflow:hidden;
            background: blue;
        }
        .right {
            width: 100px;
            height: 150px;
            float: right;
            background: purple;
        }
    </style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="content"></div>
</body>
</html>

4.3.2

这里需要注意的是，如果body部分写成如下顺序

<body>
<div class="left"></div>
<div class="content"></div>
<div class="right"></div>
</body>

那么，右边栏会被挤到下边。这是因为当“非float的元素”和“float的元素”在一起的时候，如果非float元素在先，则按照bfc规则，下一个盒子会换行，那么float的元素生成的盒子会在新的一行进行浮动。所以要将right放在content元素前面。

参考

https://www.w3.org/TR/CSS22/visuren.html#visual-model-intro
https://www.w3.org/TR/CSS2/visuren.html
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
CSS规范 > 9 视觉格式化模型 Visual Formatting Model
CSS规范 > 10 视觉格式化模型详述 Visual Formatting Model Details
CSS > 译文：理解CSS中的块级格式化上下文
 [译]:BFC与IFC
css3中的BFC,IFC,GFC和FFC
深入理解BFC和Margin Collapse
我对BFC的理解
 深入理解BFC
css3之BFC、IFC、GFC和FFC
前端精选文摘：BFC 神奇背后的原理
 BFC与多列布局
 前端精选文摘：BFC 神奇背后的原理

最后编辑于：2018.03.21 13:40:43

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 195,980评论 5赞 462
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 82,422评论 2赞 373
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 143,130评论 0赞 325
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,553评论 1赞 267
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,408评论 5赞 358
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,326评论 1赞 273
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,720评论 3赞 386
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,373评论 0赞 254
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,678评论 1赞 294
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,722评论 2赞 312
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,486评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,335评论 3赞 313
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,738评论 3赞 299
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,009评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,283评论 1赞 251
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,692评论 2赞 342
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,893评论 2赞 335