目录
一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。
网页是一个一个盒子组成的，而BFC就是一种css盒模型的渲染规则。
CSS盒模型：链接暂无
1. 垂直方向上元素margin的合并现象
首先，两个父子关系的div，给子元素添加一个margin-top: 100px后，父元素和子元素同时下移100px。
示例如下:
代码如下：
<style>
.parent {
width: 200px;
height: 200px;
background: blue;
}
.child {
width: 100px;
height: 100px;
background: yellow;
margin-top: 100px;
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>原因：规则1和规则2
2. 垂直方向上元素margin的合并现象
两个相邻的div之间分别设置了margin-bottom: 60px和margin-top: 40px，而他们实际的间距只有60px。
示例如下:
代码如下 ：
<style>
.box1 {
width: 200px;
height: 100px;
background: blue;
margin-bottom: 60px;
}
.box2 {
width: 200px;
height: 100px;
background: yellow;
margin-top: 40px;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>原因：规则1和规则2
3. overflow:hidden可以清除浮动
本文中所有的“清除浮动"均指清除浮动造成的副作用
首先，两个父子关系的div，给子元素添加float: left后，子元素脱离的文档流,于是父元素的高度为0，如下图：
然后父元素添加 overflow: hidden 就可以清除浮动，如下图：
代码如下：
<style>
.parent {
width: 200px;
border: 4px solid red;
overflow: hidden;
}
.child {
width: 100px;
height: 100px;
background: yellow;
float: left;
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>原因：规则1和规则5
4. overflow:hidden 配合浮动,可以实现自适应布局
首先，两个兄弟关系的div在同一个父div中，给子元素1添加float: left后，于是父元素高度由子元素2撑起，子元素2占据所有父元素，子元素1脱离的文档流，如下图：
然后子元素2添加overflow: hidden 后，其紧贴子元素1边缘，不再占据整个父元素，如下图：
代码如下：
<style>
.parent {
width: 100%;
border: 4px solid red;
}
.box1 {
width: 100px;
height: 100px;
background: blue;
float: left;
}
.box2 {
height: 100px;
background: yellow;
overflow: hidden;
}
</style>
<body>
<div class="parent">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>原因：规则1和规则4
根元素<html>就是最大的BFC容器。
创建BFC元素的方式很多,常见包括:
其中常见的还是overflow : hidden产生的。