首页 > 代码库 > CSS规范中的BFC
CSS规范中的BFC
一、什么是BFC
1.Formatting context:页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及其他元素的关系和相互作用。
2.Box：css布局的基本单位。元素的类型和display属性决定了这个box的类型。不同类型的box，会参与不同的Formatting Context（决定如何渲染文档）。
block-level box：display属性是block、list-item，table的元素，参与block Formatting context
inline-level box：display属性是inline，inline-block，inline-table的元素，参与inline formatting context
3.BFC定义
块级格式化上下文，他是一个独立的渲染区域，只有block-level box参与，规定了内部的block-level box如何布局，并且与这个区域外部没有关系
4.BFC布局规则
1.内部的box会在垂直方向，一个接一个地放置
2.box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3.内部每个元素的margin box的左边，与包含块border box的左边相接触，浮动也是如此
4.BFC的区域不会与float box重叠
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
6.计算BFC的高度时，浮动元素也参与计算
二、生成的BFC的元素
1.根元素
2.float属性部位none
3.position为absolute或fixed
4.display为table-cell，table-caption，flex，inline-flex
5.overflow不为visible
三、BFC的作用及原理
1.自适应两栏布局
示例代码：
#aside{
float: left;
width: 400px;
height: 400px;
background-color:skyblue;
}
#main{
height: 600px;
background-color: grey;
}
<div id=‘aside‘></div>
<div id=‘main‘></div>
内部元素的margin的左边与包含块的左边接触，效果：
因为BFC区域不与float box重叠，设置overflow：hidden，使得main生成BFC
2.清除浮动
示例代码：
.par {
border: 5px solid #fcc;
width: 300px;
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
效果图：
BFC计算高度时，浮动元素也会参与计算，触发par生成BFC
.par {
border: 5px solid #fcc;
width: 300px;
overflow: hidden;
}
3.防止垂直margin重叠
示例代码：
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
<p>Haha</p>
<p>Hehe</p>
两个p标签是同一个BFC的内部box，内部相邻的box的margin发生重叠，效果：
将p包裹一个容器，生成一个BFC，两个p就不在同一个BFC中，就不会发生折叠
.wrap{
overflow: hidden;
}
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
<div class=‘wrap‘>
<p>Haha</p>
</div>
<p>Hehe</p>
CSS规范中的BFC