标签：
我们可能会遇到这样的一些问题，比如：子元素浮动，父元素高度塌陷；父元素跟随子元素一起移动等
这是我们可以通过触发BFC来解决这样的问题。
BFC为"块级格式化上下文"。它是一个独立的渲染区域，相当于是一个独立的环境。为一个元素里面创建这样的
环境，而这个元素本身是没有的，不会对周围的其他元素造成影响。
简单点就是：BFC就是?页?面上的?一个隔离的独?立容器，容器?里?面的?子元素不会影响到外?面的元素。反之也
如此
BFC布局的一些相关规则：
1、内部的BOX垂直一个一个放置；
2、垂直方向距离由margin决定，相邻两个margin会发生重叠
3、与包含块的左边相接触
4、不会与float重叠 等等
触发BFC：
1、根元素 body里面本身就是一个BFC环境
2、float属性不为none
3、position为absolute或fixed
4、display为inline-block, table-cell, table-caption, flex, inline-flex
5、overflow不为visible //overflow：hidden 用的比较多
例如：
<style>
.par {
border: 5px solid #fcc;
width: 300px;
overflow:hidden; // 通过它来触发BFC环境，就可以在child浮动时par的高度不塌陷
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
标签：
原文地址：http://www.cnblogs.com/yyan/p/4824385.html
