这句描述是不是超级熟悉，这不是我css常见的边距折叠问题吗？现在知道它出自哪里了吧，就是这里。下面的俩个盒子各有上下20px的间距，加起来应该有40px,但显然，现在只有20px;
CSS Code复制内容到剪贴板
<style>
.top{
width:100px;
height:100px;
background:#000;
margin:20px 0;
}
.bottombottom{
width:100px;
height:100px;
background:#000;
margin:20px 0;
}
</style>
<div class="top"></div>
<div class="bottom"></div>
发生边距折叠是因为同一个BFC的关系(根BFC)。既然知道原因，解决就好办了，让他们俩个不在同一个BFC就ok啦。
3. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
通过这条属性，我们又可以想到哪些呢。对，浮动元素的塌陷问题。我们知道，一个元素中的子元素浮动了，这个父元素就会发生高度塌陷问题。下例中一旦内部的红色元素浮动，蓝色的盒子就无法被撑起，高度会变成0。
CSS Code复制内容到剪贴板
<style>
.wrap{
width:150px;
background:#ADD9E6;
margin:20px 0;
}
.in{
width:100px;
height:100px;
background:#FFCCCC;
margin:20px 0;
//float:left;
}
</style>
<div class="wrap"><div class="in"></div></div>
现在我们知道了，这是因为浮动元素创建了一个新的BFC，成为了一个独立的容器，不会影响到外面的父元素了。它的定位规则不再受制于这个父元素了。如何解决这一问题？我们知道只要在在父元素加上overflow:hidden可以清除浮动。但是这又是为什么？
