ps：上个月听朋友说BFC，做了一年多前端了居然不知道是啥，于是百度啥的才知道原来是块级元素排列的机制。虽然感觉比较概念化，但是有些确实挺实用的，整理了一下文档。
- 先了解FC是什么：Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用
- 常见的FC有 BFC（块级格式化上下文） 和IFC（行级格式化上下文）。CSS3 中还增加了 GFC 和 FFC。
- BFC（Block Formatting Context）块级格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。BFC只有Block-level box（块级元素）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
哪些元素会生成BFC?
1. 根元素
2. float属性不为none
3. position为absolute或fixed
4. display为inline-block, table-cell, table-caption, flex, inline-flex
5. overflow不为visible
BFC的特性
1 内部的Box会在垂直方向上一个接一个的放置。
2 垂直方向上的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3 bfc的区域不会与float的元素区域重叠。
4 计算bfc的高度时，浮动元素也参与计算
5 bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。
BFC有什么用？
- 双飞燕，圣杯，三栏布局
<style>
.warp {
width: 100%;
border: 5px solid #999999;
}
.left {
height: 300px;
width: 200px;
background: red;
float: left;
}
.content {
height: 400px;
background: green;
/* BFC */
overflow: hidden;
}
.right {
height: 300px;
width: 200px;
background: black;
float: right;
}
/* 此方法并没有影响后面的文档流 */
.test1 {
background: rgb(192, 107, 107);
height: 300px;
width: 200px;
border: 5px solid darkblue;
}
.test2 {
background: rgb(238, 63, 215);
height: 300px;
width: 800px;
}
</style>
<body>
<div class="warp">
<div class="left"></div>
<div class="right"></div>
<div class="content"></div>
<!-- content必须要位于最后一行,因为content占据文档流 -->
<div style="clear: both;"></div>
<div class="test1">给我加上了clear：both，又撑起了div，后面的流不变~注意，这个是为了撑起test1之前的内容。。。。当content只有200px时，我出现了塌陷,需要清除浮动~~</div>
</div>
<div class="test2">并未受影响</div>
</body>
没有overflow：hidden效果
overflow:hidden效果
注意content中的overflow：hidden有无的区别，再参考BFC的第三条：3 bfc的区域不会与float的元素区域重叠。
- 清除内部浮动，子元素撑不起父元素的高度。
<style>
.wrap {
border: 2px solid darkblue;
/* BFC */
overflow: hidden;
}
.aaa,
.bbb {
height: 50px;
width: 50px;
float: left;
}
.aaa {
background: red;
}
.bbb {
background: green
}
.ccc {
height: 150px;
width: 150px;
background: orange;
}
</style>
<body>
<div class="wrap">
<div class="aaa"></div>
<div class="bbb"></div>
</div>
<div class="ccc">我是正常元素</div>
</body>
由于撑不起父级元素，黄色ccc异常
舒服
利用计算BFC的高度时，浮动元素也参与计算这一特点，就不难理解用BFC清除浮动了
- margin重叠的问题
<style>
.aaa,
.bbb {
height: 50px;
width: 50px;
}
.aaa {
background: red;
margin-bottom: 100px;
}
.bbb {
margin-top: 100px;
background: green
}
.wrap {
overflow: hidden;
}
</style>
<body>
<div class="aaa"></div>
<div class="wrap">
<div class="bbb"></div>
</div>
</body>
没有wrap
有wrap
没有wrap的时候，间距是100px，有wrap的时候，间距是100px。。bbb在没有wrap的情况下，他和aaa是在一个BFC中的（要是不再同一个BFC，怎么会垂直排列呢是吧）。有了warp，bbb就处在独立的BFC下，那么根据2 垂直方向上的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠就不难理解了。
总结
- overflow：hidden 实现BFC
- 其实我们一直都在使用BFC，只是你不知道这个概念，你在文档里写块级元素一个个divdivdiv的时候，块级元素一个个在垂直方向整齐的排列，其实他就是BFC在搞得。
- 利用BFC可以实现三栏布局不乱插，浮动元素撑高度，margin不重叠功能
网友评论