标签：
BFC定义：
BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域， 它规定了内部的块级元素如何布局，并且内部子孙元素布局与外部元素布局互不影响。
BFC约束规则
writing-mode：tb-rl证明水平也会叠加，我是个渣渣不知道这算不算一种变相垂直）哪些元素会生成BFC
- 根元素
- float属性为none
- position属性为absolute或fixed
- display为inline-block，table-cell,table-caption,flex，inline-flex
- overflow不为visiblev
应用
<!doctype HTML>
<html>
<head>
<style type="text/css">
#green {
margin:10px 10px 10px 10px
}
#blue {
margin:10px 10px 10px 10px
}
#red {
margin:10px 10px 10px 10px
}
body {
writing-mode:tb-rl;
}
</style>
</head>
<body>
<div id="green" style="background:lightgreen;height:100px;width:100px;"></div>
<div id="blue" style="background:lightblue;height:100px;width:100px;"></div>
<div id="red" style="background:pink;height:100px;width:100px;"></div>
</body>
</html>
因为三个box同属一个BFC，所以可以看到margin发生重叠。想要防止重叠就要让box不属于一个BFC。
对于嵌套的margin重叠，取相关元素的margin最大值。
<!doctype HTML>
<html>
<head>
<style type="text/css">
#green {
margin:10px;
}
#blue {
margin:10px;
}
body {
}
ul{
margin:20px;
}
li{
margin:25px;
}
</style>
</head>
<div style="overflow: hidden">
<div id="green" style="background:lightgreen;height:100px;width:100px;"></div>
<div id="blue" style="background:lightblue;height:100px;width:100px;">
<ul>
<li>1.</li>
<li>2.</li>
<li>3.</li>
</ul>
</div>
</body>
</html>图中取的li的margin值，因为它的值最大。
因为计算BFC高度时，浮动元素也参与计算。所以可以用overflow：hidden；触发BFC，撑开父元素达到清除浮动的效果。或者说包围浮动更贴切？
这里已经写了清除浮动，不再赘述。
BFC区域不会与float区域发生重叠，所以可以用来做宽度自适应。
三栏布局的实现
<!DOCTYPE html>
<html lang = "zh-cn">
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.left{
background: lightgreen;
float: left;
}
.right{
background: lightblue;
float: right;
}
.center{
background: lightpink;
font-family: "微软雅黑"；
}
</style>
<body>
<div class="left" style="width: 100px;height: 100px;">
</div>
<div class="right" style="width: 100px;height: 100px;">
</div>
<div class="center"style="overflow: hidden;">
<p>
小鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅
</p>
</div>
</body>
</html>将代码中center的overflow去掉会出现下面效果，原因是center没有触发BFC。
当在center中加入overflow:hidden;样式中间栏便触发了BFC。BFC区域不会与float区域重叠。这样就实现了一个简单的三栏布局。
总结：
BFC内部元素和外部元素不会相互影响，应用的地方有很多，有浮动元素时使用BFC应该注意BFC会通过变窄从而不与float重叠。布局时应考虑到此以防由此引发布局错乱。
BFC清除浮动也是很流行的一种方法。给布局提供了很大方便。
标签：
原文地址：http://blog.csdn.net/ustl_lau/article/details/51305420
