在float时，总能遇到{overflow：hidden}以及相邻元素margin有时不重叠的情况，一直不是很清楚其中原因，今天看了一些关于BFC的知识，发现答案原来在这里，为防止过两天又忘记，赶紧整理一下，做点笔记：
BFC(Block Formatting content)块级格式化上下文，一个独立的渲染区域，它规定内部如何布局都与此区域外部毫无关系。BFC是页面上一个隔离的独立容器，容器里面的子元素不会影响外面的元素，反之亦如此。 CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC:
- 根元素
- float的值不为none
- overflow的值不为visible(为auto,scroll,hidden)
- display的值为inline-block、table-cell、table-caption(非块级盒子)
- position的值为absolute或fixed
BFC的布局规则有。（百度一下，你就知道）。。主要是：要想邻接就必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。同一个BFC中，两相邻的两box的margin才发生重叠。 BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。 两个margin是邻接时，会产生折叠。邻接需满足一系列条件：。（百度一下，你就知道）。。主要就是：浮动元素、绝对定位元素不与任何元素的外编辑产生折叠。 原因就是脱离了文档流，会新建BFC。
BFC用来做什么： 1.不和浮动元素重叠。如下例： HTML
<div class="article">
<div class="image">
</div>
<div class="content">
我是内容我是内容我是内容我是内容我是内容 我是内容我是内容我是内容我是内容我是内容我是内容我是内容
</div>
</div>
CSS：
.image{
width:100px;
height: 100px;
float: left;
background: #abc;
}
.content{
height:200px;
width: 150px;
background-color: darkcyan;
}
结果如下：
这是我们常说的创建浮动框可使文本围绕图像。但如果我们是想要用此方法进行自适应两栏布局，我们需要解决普通文档流对浮动元素的包围。于是对contBFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。ent加一条css渲染，.content{overflow:hidden;}此时出现了如下的效果：
原因：overflow:hidden触发.content元素生成BFC,这样，容器外部的元素就不能影响其自身了。之前，我们的.image是浮动元素，生成BFC,所以不影响外面的元素，于是.content元素当其不存在一样布局。这应该就是float，position中的脱离文档流，被其余元素顶上的最终原因了。
2.清除元素内部浮动 css（HTML代码不变）
.article{
width: 300px;
border:1px solid red;
padding:10px;
}
.image{
width:100px;
height: 100px;
float: left;
background: #abc;
}
.content{
height:200px;
width: 150px;
background-color: darkcyan;
float: right;
}
结果如下：
原因：在进行普通流中的块级非替换元素的高度计算时，浮动子元素不参与计算。在计算生成了BFC的元素的高度时，其浮动子元素应该参与计算。所以，触发外部容器BFC，高度将重新计算。比如给.article加上属性overflow:hidden触发其BFC。 3.j解决上下相邻两个元素重叠。 HTML:
<div class="article">
<div class="pare">
<div class="image">
</div>
</div>
<div class="content">
我是内容我是内容我是内容我是内容我是内容
我是内容我是内容我是内容我是内
容我是内容我是内容我是内容
</div>
CSS:
.pare{
overflow: hidden;
}
.image{
width:100px;
height: 100px;
margin-bottom: 20px;
background: #abc;
}
.content{
height:200px;
width: 150px;
background-color: darkcyan;
margin-top: 20px;
}
结果如下：
原因：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。也就是我们所说的叠加要在同一个BFC中。
问题：如下代码：
<style type="text/css">
.image{
width:100px;
height: 100px;
margin-bottom: 20px;
background: #abc;
overflow: hidden;
}
.content{
height:200px;
width: 150px;
background-color: darkcyan;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="article">
<div class="image">
</div>
<div class="content">
我是内容我是内容我是内容我是内容我是内容
我是内容我是内容我是内容我是内
容我是内容我是内容我是内容
</div>
</div>
</body>
结果：
明明不在同一个BFC，为什么发生了折叠？？？