一、BFC定义
BFC即‘块级格式化上下文’。它是一个独立的渲染区域,只有block-level-box参与,它规定了内部的block-level box如何布局,并且与这个区域外部毫不相关。
二、BFC布局规则:
1、内部的BFC会在垂直方向上,一个接一个的放置(即块级元素独占一行)。
2、Box垂直方向上的距离由margin决定,属于同一个BFC的两个相邻box的margin会发生重叠(margin重叠的三要素:同一个BFC、相邻、块级元素)。
3、每个元素的margin box的左边,与包含块的左边相接触,即使存在浮动也是如此。
4、BFC的区域不会与float重叠(利用这一点可以实现自适应两栏布局)。
5、BFC其实就是一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之如此。
6、计算BFC的高度时,浮动元素也参与计算(清除浮动)。
三、哪些元素会生成BFC?
根元素
float属性不为none
position为absolute或fixed
display为inline-block,table-cell,table-caption,flex,inline-flex
overflow不为visible
四、BFC的作用及原理
1、自适应两栏布局
根据BFC
布局规则第3条:
每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。因此,虽然存在浮动的元素aslide,但main的左边依然会与包含块的左边相接触。
<!DOCTYPE html>
<html>
<head>
</head>
<style>
body{
width: 300px;
position:relative;
}
.aside{
width:100px;
height:150px;
float:left;
background: #f66;
}
.main{
height:200px;
background: #fcc;
}
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
</html>复制代码
根据BFC
布局规则第四条:
BFC
的区域不会与float box
重叠。当触发main生成
BFC
后,这个新的BFC
不会与浮动的aside重叠。因此会根据包含块的宽度,和aside的宽度,自动变窄。
.main{
height:200px;
background: #fcc;
overflow: hidden;
}复制代码
2、清除内部浮动
根据BFC
布局规则第六条:
计算BFC的高度时,浮动是要参与计算的。
为达到清除内部浮动,我们可以触发par生成BFC
,那么par在计算高度时,par内部的浮动元素child也会参与计算。
.par {
overflow
:
hidden
;
}
3、阻止上下margin重叠
根据BFC布局规则第二条:
Box
垂直方向的距离由margin决定。属于同一个BFC
的两个相邻Box
的margin会发生重叠
<!DOCTYPE html>
<html>
<head>
</head>
<style>
p{
color:#f55;
background: #fcc;
width:200px;
line-height: 100px;
text-align: center;
margin: 100px;
}
</style>
<body>
<div class="par">
<p class="p">haha</p>
<p class="p">hehe</p>
</div>
</body>
</html>复制代码
我们可以在p外面包裹一层容器,并触发该容器生成一个BFC
。那么两个P便不属于同一个BFC
,就不会发生margin重叠了。
<!DOCTYPE html>
<html>
<head>
</head>
<style>
p{
color:#f55;
background: #fcc;
width:200px;
line-height: 100px;
text-align: center;
margin: 100px;
}
.par{
overflow: hidden;
}
</style>
<body>
<div class="par">
<p class="p">haha</p>
</div>
<div class="par">
<p class="p">hehe</p>
</div>
</div>
</body>
</html>复制代码
总结:
其实以上的几个例子都体现了BFC
布局规则第五条:
BFC
就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
因为BFC
内部的元素和外部的元素绝对不会互相影响,因此, 当BFC
外部存在浮动时,它不应该影响BFC
内部Box的布局,BFC
会通过变窄,而不与浮动有重叠。同样的,当BFC
内部有浮动时,为了不影响外部元素的布局,BFC
计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。