推荐看看css2.1规范!!!
css2.盒模型
在了解BFC之前，我们先来看看什么是块级格式化。在css2.1规范中是这样定义的/
块级格式化
浮动，绝对定位的元素，非块盒的块容器（例如inline-blocks，table-cells和table-captions），以及’overflow’不为’visible’的块盒（当该值已被传播到视口时除外（except when that value has been propagated to the viewport））会为其内容建立新的块格式化上下文
在一个块格式化上下文中，盒在垂直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的垂直距离由margin属性决定。同一个块格式化上下文中的相邻块级盒之间的垂直外边距会合并
这就是BFC。
首先先看看bfc有什么效果？
1. 边距取最大值
<div class="a1">
<div class="a11"></div>
<div class="a12"></div>
</div>
.a1 {
position: absolute;
width: 200px;
height: 400px;
margin-left: 0;
background: #ccc;
padding: 0;
}
.a11 {
width: 100px;
height: 50px;
margin: 12px;
background: yellow;
}
.a12 {
width: 100px;
height: 100px;
background: blue;
margin: 12px;
}
这样得到的效果
从中我们可以看到，元素a11和元素a12的下边距是重合的，两元素在设置垂直方向上的边距a、b时，视图上两元素之间出现的效果就是max(a, b)。
这是因为它们处于同一个bfc容器<div class="a1">内，如果想要不重叠就要设置他们在不同的容器里如
<div class="container">
<div class="content1"></div>
<div class="content2"></div>
</div>
<div class="container">
<div class="content1"></div>
<div class="content2"></div>
</div>
.container {
overflow: hidden;
}
.content1 {
margin: 12px;
width: 100px;
height: 100px;
background-color: blue;
}
上图中的外边距未重叠
2. BFC可以包含浮动的元素，即起到清除浮动的作用。
一般来说当我们设置元素的float属性时，该元素就会脱离普通文档
.container {
/*overflow: hidden;*/
border: 1px solid #ccc;
}
.content1 {
float: left;
margin: 12px;
width: 100px;
height: 100px;
background-color: blue;
}
脱离文档使得他的父元素的边框没有只剩下2px的高度，因为<div class="content">已经从<div class="container">中逃出来了。而如果想要清除这种浮动效果，只需在container中加个overflow: hidden的属性就行。
.container {
overflow: hidden;
border: 1px solid #ccc;
}
.content1 {
float: left;
margin: 12px;
width: 100px;
height: 100px;
background-color: blue;
}
3. BFC可以阻止元素被浮动元素覆盖
.container {
/*overflow: hidden;*/
border: 1px solid #ccc;
}
.content1 {
margin: 12px;
width: 100px;
height: 100px;
/*background-color: blue;*/
}
.a {
float: left;
background-color: yellow;
}
.b {
width: 200px;
height: 200px;
background-color: blue;
}
如果要去除元素的覆盖，就是让设置overflow属性，使得变成bfc结构
.container {
overflow: hidden;
border: 1px solid #ccc;
}
.content1 {
margin: 12px;
width: 100px;
height: 100px;
/*background-color: blue;*/
}
.a {
float: left;
background-color: yellow;
}
.b {
width: 200px;
height: 200px;
background-color: blue;
}
看完这几个效果，我们再回到一开始的定义。如何变为BFC结构？
- 设置float属性
其实在上述问题中，就如第三个例子，如果我们在container中设置float属性，虽然不可以变成垂直分布，但也能达到去除元素覆盖的效果
- 设置position属性，即position: absolute，
把第三个例子的container中overflow属性换成position属性，得到的效果中
我们可以看到，元素B也是没有被浮动元素覆盖，，只是。。。它把A覆盖了。。。
- 设置display属性为inline-block，table-cell，table-caption
再把position属性换为display属性
- 设置overflow属性
在除visible外的属性都可以变成BFC结构，然而，visible是overflow的默认属性，也就是说一般是非BFC结构的。。效果就是我们的第三个例子
后记,其实在写这个BFC结构模式时遇到了很多出乎意料的现象，深知css基础弱到爆炸，但是觉得应该先把目前所知记录下来，在之后慢慢通过实践了解更多，再慢慢解决更多的疑惑。。
