BFC就是block formatting context的缩写，中文就是“块级格式化上下文”的意思
Formatting context是W3C CSS2.1规范中的一个概念。
它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
如何创建：
1. float 除了none以外的值
2. overflow 除了visible 以外的值（hidden，auto，scroll ）
3. display (table-cell，table-caption，inline-block, flex, inline-flex)
4. position值为（absolute，fixed）
5. fieldset元素
在以上的情况里可以创建BFC。
特性：
1. 内部的Box会在垂直方向，从顶部开始一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC的区域不会与float box叠加。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
6. 计算BFC的高度时，浮动元素也参与计算。
应用：
<!DOCTYPE html>
<html>
<head>
<title>BFC</title>
<meta charset="utf-8"/>
<style>
.wrap{
width:300px;
position: relative;
border:1px solid #000;
}
.aside{
width:100px;
height: 150px;
float: left;
background: red;
}
.main{
height: 200px;
background: yellow;
overflow: hidden;
}
.par{
border:5px solid #000;
width:300px;
overflow: hidden;
}
.child{
border:5px solid #f66;
width:100px;
height:100px;
float: left;
}
p{
color:red;
background: #fcc;
width:200px;
line-height: 200px;
text-align: center;
margin: 100px;
}
.wrapP{
overflow: hidden;
}
</style>
</head>
<body>
<h1>自适应两栏布局</h1>
<div class="wrap">
<div class="aside"></div>
<div class="main"></div>
</div>
<h1>清除内部浮动</h1>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
<h1>防止垂直margin重叠</h1>
<p>哈哈</p>
<div class="wrapP">
<p>haha</p>
</div>
</body>
</html>
参考：
629
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
