通过例子吃透BFC1、前言有一说一最近被这个BFC搞的头疼，比较抽象，很难理解。通过翻阅MDN、大佬们的文章等，对这个

1、前言

有一说一最近被这个BFC搞的头疼，比较抽象，很难理解。通过翻阅MDN、大佬们的文章等，对这个BFC产生了自我的认识，写下这篇文章加深一下学习的成果。路漫漫其修远兮，后面还有IFC、GFC、FFC等需要学习。

根据字面意思(块级格式化上下文)知道它是一个作用范围。这个范围特指在块盒下，其内容的位置或布局的范围。在默认情况下，整个页面只有一个块级格式化上下文(BFC),就是根元素HTML,所以说根元素下的所有其他元素都会在这个HTML下BFC范围中布局，永远不会超出这个规定的范围。

小白，第一次斗胆写文章，望谅解，有哪里不对的地方欢迎大家指点~

1、通过一个浮动的例子来理解`BFC`

<!-- html -->
<div id="outer">
	<div id="inner"></div>
</div>

/* css */        
#outer {
width: 100px;
border: 1px solid red;
}
#inner {
width: 50px;
height: 200px;
float: left;
background-color: blue;
}

www

效果在我们预料之中，由于子元素inner的浮动，使得父元素的高度坍塌，我们常常采用清除浮动来使得父元素的高度能够被正常的计算。这里使用清除浮动手段实际就是开辟一个BFC，使得在这个BFC内的一些布局、浮动能够被正常的计算和渲染。那又通过第二张图我们发现根元素HTML的高度并没有坍塌，因为我们上面提到过，页面默认会有一个BFC那就是根元素，且body元素、div元素都是在这个HTML的BFC中的,所以根元素的高度正常的被计算出来了。

所以根据字面可以概括为用于决定块级盒的布局及浮动互相影响范围的一个区域。这里提到的块级盒并不是我们常常所说的块级元素。所以对于创建BFC，只会作用域块级盒。

2、通过外边距重叠的例子来理解`BFC`

<!-- html -->
<body>
    <div id="dv1">
    </div>
    <div id="dv2">
    </div>
</body>

/* css */
#dv1 {
    width: 50px;
    height: 50px;
    background-color: red;
    margin-bottom: 20px;
}
#dv2 {
    width: 50px;
    height: 50px;
    background-color: blue;
    margin-top: 20px;
}

有点经验的,都知道这个结果在我们的意料之中的,因为发生了外边距重叠,准确来说是垂直方向的外边距重叠。为什么会发生呢？因为这是BFC的一个特性，在同一个BFC中，子元素在垂直方向上会发生外边距重叠，外边距值取最大的，而不是相加。把这个BFC的特性带到例子中去看，因为这俩个div属于HTML的BFC区域内的，所以这个俩个div发生了外边距重叠。

解决的方案就是讲这个俩个div进行隔离，不然他们存在同一个BFC下，所以会在其中的一个div外层包裹一个块元素，并且开启BFC即可，上代码~。

<!-- html -->
<body>
    <div id="dv1">
    </div>
    <div id="bfc">
        <div id="dv2">
        </div>
    </div>
</body>

/* css */
#dv1 {
    width: 50px;
    height: 50px;
    background-color: red;
    margin-bottom: 20px;
}
#dv2 {
    width: 50px;
    height: 50px;
    background-color: blue;
    margin-top: 20px;
}
#bfc {
    overflow: auto;
}

3、BFC的创建、特点、应用

创建：

根元素（<html>）
浮动元素（float 不为 none）
绝对定位元素（position 为 absolute 或 fixed）
表格的标题和单元格（display 为 table-caption，table-cell）
匿名表格单元格元素（display 为 table 或 inline-table）
行内块元素（display 为 inline-block）
overflow 的值不为 visible 的元素
弹性元素（display 为 flex 或 inline-flex 的元素的直接子元素）
网格元素（display 为 grid 或 inline-grid 的元素的直接子元素）

特点:

BFC 内部的块级盒会在垂直方向上一个接一个排列
同一个 BFC 下的相邻块级元素可能发生外边距折叠，创建新的 BFC 可以避免的外边距折叠
每个元素的外边距盒（margin box）的左边与包含块边框盒（border box）的左边相接触（从右向左的格式化，则相反），即使存在浮动也是如此
浮动盒的区域不会和 BFC 重叠
计算 BFC 的高度时，浮动元素也会参与计算

应用:

清除浮动
防止外边距重叠
自适应多栏布局

这里着重讲解一下BFC特点的第3点和第4点，这俩个特性常常用来自适应多栏布局的。

首先讲第三点，就不贴代码了，点这看代码，意思就是BFC里的子元素都会依次从父元素左边开始摆放，即使是浮动元素(left，right就是右边)，也是会从左边摆放，意味着浮动元素会与其他元素发生重叠，就是我们常说的浮动后，脱离文档流，其他元素会占据浮动元素的位置。别忘记，根元素的HTMl也是一个BFC，所以这种情况也会发生。

对于第四点更好理解，想象我们常常使用float进行布局，元素依次朝一个方向依次排列，并不会发生重叠的问题。因为浮动会产生一个BFC，BFC与BFC之间是不会相互影响的，也正说明了浮动盒的区域不会和 BFC 重叠。

5、总结

BFC可以看出是一个独立的渲染区域，规定在这区域内其元素的定位、布局、相互作用，且并不会影响到外面，通用外面的也不会影响到内部。
页面默认存在一个BFC，就是根元素HTMl，也正是普通文档流。所以像脱离文档流都会产生一个BFC，个人理解是脱离了HTML的BFC，自成一个BFC区域。

通过例子吃透BFC

1、前言

1、 通过一个浮动的例子来理解BFC

2、通过外边距重叠的例子来理解BFC

3、BFC的创建、特点、应用

5、 总结

1、通过一个浮动的例子来理解`BFC`

2、通过外边距重叠的例子来理解`BFC`

5、总结