标签：
BFC是块级格式化上下文：
1.BFC规定了元素如何对内容进行定位，以及和其他元素的关系和相互作用
2.BFC提供了一个环境，这个环境中按照一定规则进行布局不会影响其他环境中的布局
1.float值不是none
2.overflow值不是visible
3.positive值是absolute或fixed
4.display值是inline-block, table-cell, table-caption, flex, inline-flex
1.内部的Box会在垂直方向上一个接一个的放置
2.同一个BFC的两个相邻Box的margin会发生重叠，与方向无关
3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float的元素区域重叠
5.计算BFC的高度时，浮动子元素也参与计算
6.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
1.BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
2.BFC不会重叠浮动元素
3.BFC可以包含浮动
1.BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
#outer {
background-color: #FF8686;
width: 100%;
margin-top: 50px;
}
#outer #inner {
width: 100px;
height: 100px;
margin-top: 50px;
background-color: #AFD9FD;
}效果：
父元素触发BFC
#outer {
overflow: hidden;
background-color: #FF8686;
width: 100%;
margin-top: 50px;
}
#outer #inner {
width: 100px;
height: 100px;
margin-top: 50px;
background-color: #AFD9FD;
}
效果：
2.BFC不会重叠浮动元素
3.BFC可以包含浮动
<!doctype>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="main">
<div id="head">
this is header,height is 100px
</div>
<div id="content">
<div id="contentLeft">
this is left content
</div>
<div id="contentRight">
this is right content
</div>
</div>
<div id="foot">
this is footer,height is 100px
此布局footer自适应，当主文本区或侧边栏不满一页时，footer位于屏幕下端。
如果主文本区和侧边栏高度超过一页时，footer将在两者之中height最大元素的下方可手动调节侧边栏和主文本区高度查看效果
</div>
</div>
<style type="text/css">
/*其他样式代码*/
*{
margin: 0px;
font-size: 25px;
color: white;
font-family: SimHei;
text-align: center;
}
#head,
#foot{
background-color: #7E7E7E;
}
#content #contentLeft{
background-color: #FF8686;
}
#content #contentRight{
background-color: #AFD9FD;
}
/**
* 布局核心代码
*/
/*实现内容不足一页时，foot固定在底部*/
/*首先需要设定html的高度为一个页面以方便将一个div（g-ctn）设定为最小大小为浏览器窗口大小*/
html,body{
height: 100%;
}
#main{
min-height: 100%;
position: relative;
}
#foot{
position: absolute;
bottom: 0px;
width: 100%;
}
#head,
#foot{
height: 100px;
}
#content{
/*BFC规则5：计算BFC的高度时，浮动子元素也参与计算，则触发BFC，让浮动元素参与计算/
/*实现左边内容较高时，content可以计算到长度，让底部自适应*/
overflow: hidden;
}
#content #contentLeft{
float: left;
width: 300px;
height: 500px;
}
#content #contentRight{
height: 600px;
/*添加原因：BFC规则3：每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
* 则虽然存在浮动的元素contentLeft，但contentRight的左边依然会与包含块的左边相接触。
* 方法：BFC规则4：需要overflow: hidden，触发contentRight生成BFC
* 结果：BFC的区域不会与float的元素区域重叠*/
overflow: hidden;
}
</style>
</body>
</html>
标签：
原文地址：http://blog.csdn.net/github_34514750/article/details/51364202
