1.什么是BFC
BFC(块级格式化上下文)Block Formatting Context 。这个概念来自于视觉格式化模型（visual formatting model）中的正常流（Normal flow）
2.BFC的原理（渲染规则）
（1）BFC垂直方向边距重叠问题
（2）BFC的区域不会与浮动元素的box重叠
（3）BFC是一个独立的容器，外面的元素不会影响里面的元素
（4）计算BFC高度的时候浮动元素也会参与计算
3.创建BFC的条件有哪些
浮动元素、绝对定位元素、display特性为inline-block、table-cell、table-caption的元素，以及overflow不是visible的元素，会创建新的BFC。具体如下：
(1)浮动元素的float不是none。
(2)绝对定位元素。position不为relative或static。
(3)内联块display为inline-block , table-cell , table-caption 中的任何一个。
(4)具有overflow且值不是visible的块元素(auto, scroll, hidden)。
4.情景
（1）垂直方向边距重叠问题
<style>
html * {
margin: 0;
padding: 0;
}
.margin {
background: yellowgreen;
overflow: hidden;
}
.margin > p {
margin: 10px auto 20px;
background: red;
height: 30px;
}
</style>
<section class="margin">
<p>1</p>
<p>2</p>
<p>3</p>
</section>
我们发现下边距的宽度都为
20px,根据边距重叠原则，取最大边距。那么问题来了，我们如何让边距不重叠呢？
<style>
html * {
margin: 0;
padding: 0;
}
.margin {
background: yellowgreen;
overflow: hidden;
}
.margin p {
margin: 10px auto 20px;
background: red;
height: 30px;
}
.overflow {
overflow: hidden;
background: blue;
}
</style>
<section class="margin">
<p>1</p>
<div class="overflow">
<p>2</p>
</div>
<p>3</p>
</section>
如上，我们在第二个p标签外层加了div标签，加入样式overflow: hidden;解决了边距重叠的问题。效果如下：
（2）布局问题（BFC与float的重叠）
<section class="layout">
<style>
.layout {
background: yellow;
}
.layout .left {
float: left;
width: 50px;
height: 50px;
background: red;
}
.layout .right {
height: 70px;
background: blue;
}
</style>
<div class="left"></div>
<div class="right"></div>
</section>
左侧为红色的块，右侧为蓝色的块。但是，我们发现虽然右侧蓝色色块比左侧高出
20px，但是高出的部分占据了红色色块下方的位置。这是由float元素的特性导致的。单大多数情况下我们并不想这样，我们想要的效果是左右单独分开，不占据红色色块下方的位置，这时我们该如何解决这个问题呢？
<style>
.layout .right {
height: 70px;
background: blue;
overflow: auto; // overflow: hidden;
}
</style>
如上：我们加入样式
overflow: auto 使用BFC的元素不会与float元素相互重叠的特性使左右两侧区分开来。整个section的颜色也显示了出来。便达到了我们想要的结果。
（3）清除浮动
<section class="clear">
<style>
.clear {
background: gold;
}
.clear .float {
float: left;
font-size: 30px;
}
</style>
<div class="float">
float element
</div>
</section>
我们发现
section元素的高度为0，这是因为子元素div为浮动元素，父元素的高度计算不包含float元素。这时将父元素设置为BFC之后子元素的浮动元素将同样参与到高度计算中。
BFC子元素即使是float也会参与高度计算
<style>
.clear {
background: gold;
overflow: auto;
或
float: left;
}
</style>
如上，我们加入overflow: auto或float: left,解决了问题。
以上就是BFC在开发过程中经常遇到的问题，希望对大家有帮助！
