CSS布局中BFC是面试中常被问到的问题,那么我们就来总结一下的相关知识点。
BFC的全名叫block formatting context, 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。没看懂什么意思。应该是这样:
- BFC的布局是一个独立的布局,和BFC之外的布局是互不印象的;
- BFC布局是可以通过一些条件触发的,从而实现布局上的需求或解决一些问题;
- BFC其实就是一个工具,理解功能和特性就OK。
BFC触发的条件?
- 根元素(<html>)
- float值非none
- overflow值非visible
- display值为inline-block、table-cell、table-caption、flex、inline-flex
- position值为absolute、fixed
BFC的特点是什么?
1、属于同一个BFC的两个相邻容器的上下margin会重叠
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.top{
width: 200px;
height: 200px;
background: red;
margin-bottom: 40px;
}
.bottom{
width: 200px;
height: 200px;
background: blue;
margin-top: 60px;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>
功能:可解释为何相邻两容器上下外边距会发生重叠
当给红色块下外边距margin-bottom
,给蓝色块上外边距margin-top
时,上下外边距会发生重叠,两个色块的间距解析为两者中的较大值(60px)。
原因:
此时红色块和蓝色块属于同一个BFC,即根元素(<html>)。BFC的特性1规定 “属于同一个BFC的两个相邻容器的上下margin会重叠”,故两者上下边距发生重叠。
解决方法:给蓝色块添加父元素.box
并添加声明overflow: hidden;
可以解决红色块和蓝色块的上下margin重叠问题。
原因:
通过给蓝色块添加父元素.box
并添加声明overflow: hidden;
,使得父元素.box
触发了BFC(见BFC触发条件3),此时红色块和蓝色块属于不同的BFC,红色块的BFC仍然是根元素(<html>),蓝色块的BFC是父元素.box
。即不满足BFC特性1中的规定“属于同一个BFC······”,从而解决了两者的上下margin重叠问题。
注:overflow: hidden;
只是触发BFC众多条件中的一个,使用其他条件也能解决此问题,注意触发条件可能造成的其他影响即可,如浮动会造成的脱离文档流等。
2、计算BFC高度时浮动元素也参于计算
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.outside{
border: 10px solid blue;
}
.inside{
width: 200px;
height: 200px;
background: yellowgreen;
float: left;
}
</style>
</head>
<body>
<div class="outside">
<div class="inside"></div>
</div>
</body>
</html>
功能:可解释为何overflow: hidden;
能解决父元素高度塌陷
当父元素.outside
没有设置高度且子元素.inside
都浮动时,父元素.outside
会出现高度塌陷。
原因:
子元素.inside
设置浮动后脱离文档流,而父元素.outside
又没有设置高度,故父元素.outside
会出现高度塌陷。
解决方法:给父元素.outside
添加声明overflow: hidden;
,父元素高度塌陷消失。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.outside{
border: 10px solid blue;
overflow: hidden;
}
.inside{
width: 200px;
height: 200px;
background: yellowgreen;
float: left;
}
</style>
</head>
<body>
<div class="outside">
<div class="inside"></div>
</div>
</body>
</html>
原因:
给父元素.outside
添加声明overflow: hidden;
,使得父元素.outside
触发了BFC(见BFC触发条件3),而BFC特性规定“计算BFC高度时浮动元素也参于计算”,此时子元素.inside
虽然设置了浮动,但其高度仍计算至父元素内,从而解决了高度塌陷问题。
3、BFC的区域不会与浮动容器发生重叠
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.left{
width: 100px;
height: 200px;
background: yellowgreen;
float: left;
}
.right{
height: 300px;
background: blue;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
功能:在布局上实现自适应两栏(三栏)
正常情况下,左侧元素.left
浮动时,会与右侧元素.right
发生重叠,不能实现自适应两栏效果。
原因:
左侧元素浮动,脱离文档流。
解决方法:给右侧元素.right
添加声明overflow: hidden;
,左右侧元素重叠消失,实现自适应两栏效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.left{
width: 100px;
height: 200px;
background: yellowgreen;
float: left;
}
.right{
height: 300px;
background: blue;
overflow: hidden;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
原因:
给右侧元素.right
添加声明overflow: hidden;
,使得右侧元素触发了BFC(见BFC触发条件3),而BFC特性规定“BFC的区域不会与浮动容器发生重叠”,从而解决了重叠问题,实现自适应两栏效果。
4、BFC内的容器在垂直方向依次排列
类似正常情况下块元素在垂直方向上依次排列,较易理解。
5、元素的margin-left与其包含块的border-left相接触
6、BFC是独立容器,容器内部元素不会影响容器外部元素
BFC大致就这么多内容,面试前必读。