1.BFC简要定义
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，它规定了内部如何布局，是决定块盒子的布局及浮动相互影响范围的一个区域，并且与这个区域外部毫不相干。
2.BFC创建方式
根元素或其它包含它的元素；
浮动 (元素的float不为none)；
绝对定位元素 (元素的position为absolute或fixed)；
行内块inline-blocks(元素的 display: inline-block)；
表格单元格(元素的display: table-cell，HTML表格单元格默认属性)；
overflow的值不为visible的元素；
弹性盒 flex boxes (元素的display: flex或inline-flex)
3.BFC内部特性
内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）；
处于同一个BFC中的元素相互影响，可能会发生margin collapse；但不同BFC可以阻止margin collapse
每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；
计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；
浮动盒区域不叠加到BFC上；
实战操作代码解析，更多web前端实战操作，学习指导，学习资源，点：前端技术分享
4.BFC应用实例
1.BFC清除浮动
将父元素设置一个能让其变为BFC区域的属性，不如overflow：auto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#one{
background:green;
width: 100px;
height: 50px;
float: left;
}
#two{
background: red;
width: 200px;
height: 50px;
float: left;
}
#box{
border: 2px solid salmon;
width: 400px;
overflow: auto;
}
</style>
</head>
<body>
<div id="box">
<div id="one">one</div>
<div id="two">two</div>
</div>
</body>
</html>
2.BFC处理margin collapse
在CSS中，两个或多个毗邻的普通流中的盒子（可能是父子元素，也可能是兄弟元素）在垂直方向上的外边距会发生叠加，这种形成的外边距称之为外边距叠加。这里讲解父子元素，兄弟元素同理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
p{
padding: 0;
margin: 20px 0 20px 0;
height: 20px;
background-color: burlywood;
color: #fff;
}
div{
overflow: auto;//前后的区别取决于这句话，加上就能让父级生成BFC区域包含它们
width: 250px;
background-color: #ccc;
}
</style>
</head>
<body>
<div>
<p>aaaaaaaaaaaaaa</p>
<p>bbbbbbbbbbbbbb</p>
</div>
</body>
</html>
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h62904.shtml
