Open hzzzzzzzq opened 2 years ago
BFC 即 Block Formatting Contexts (块级格式化上下文),它属于定位方案中的普通流。
BFC
Block Formatting Contexts
我们可以把具有 BFC 特性的元素看作为隔离了的独立容器,容器内的元素不会在布局上影响到外面的元素,并且 BFX 具有普通容器所没有的一些特性。
简单来说,就是 BFC 有一个自己的空间,在空间内怎么做,都不会影响外面。
只要元素满足下面任一条件即可出发 BFC 特性
body
float
none
position
absolute
fixed
display
inline-block
table-cells
flex
overflow
visible
hidden
auto
scroll
1. 同一个 BFC 下外边距会发生折叠
.box { width: 100px; height: 100px; } .first { margin-bottom: 100px; background-color: orange; } .second { margin-top: 50px; background-color: wheat; }
<body> <div class="box first"></div> <div class="box second"></div> </body>
从结果来看,两个 div 元素都处在同一个 BFC 容器下,也就是 body 根元素。所以 first 的下边距与 second 的上边距发生重叠,且保留大的值。所以两个元素之间的距离只有 100px,而不是 150px。
div
first
second
100px
150px
我们想要两个盒子不进行折叠,这时候只需要将两个盒子设置为 BFC 容器就可以了。
.container { overflow: hidden; } .box { width: 100px; height: 100px; } .first { margin-bottom: 100px; background-color: orange; } .second { margin-top: 50px; background-color: wheat; }
<div class="container"><div class="box first"></div></div> <div class="container"><div class="box second"></div></div>
这时候,两个盒子的垂直边距就变成了 150px。
2. BFC 可以包含浮动的元素(清除浮动)
浮动的元素会脱离标准文档流,我们看一个不设置 BFC 是的例子。
.box { border: 2px solid #999; width: 200px; } .child { width: 100px; height: 100px; float: left; background-color: orange; }
<div class="box"> <div class="child"></div> </div>
我们来看看显示效果,这时候 box 容器没有出发 BFC,显示时 child 是有浮动起来的,脱离文档流。
box
child
由于 child 元素浮动,脱离了文档流,所以容器只剩下 4px 的高度。
4px
现在我们让 box 触发 BFC,这时候就会将浮动元素包裹起来。
.box { border: 2px solid #999; width: 200px; overflow: hidden; }
我们看到,我们给 box 容器设置 overflow: hidden 触发 BFC,将浮动元素也包裹进 box 元素,清除了浮动效果。
overflow: hidden
BFC
什么是 BFC?
BFC
即Block Formatting Contexts
(块级格式化上下文),它属于定位方案中的普通流。我们可以把具有
BFC
特性的元素看作为隔离了的独立容器,容器内的元素不会在布局上影响到外面的元素,并且 BFX 具有普通容器所没有的一些特性。简单来说,就是
BFC
有一个自己的空间,在空间内怎么做,都不会影响外面。BFC 原理
BFC
元素垂直方向的边距会发生重叠,属于不同BFC
的外边距不会发生重叠。BFC
区域不会与浮动元素的布局重叠。BFC
元素是一个独立的容器,外面的元素不会影响到内部元素,同样,内部元素也不会影响外部元素。BFC
高度的计算。触发 BFC
只要元素满足下面任一条件即可出发 BFC 特性
body
根元素float
除none
以外的值position
的absolute
和fixed
display
为inline-block
、table-cells
、flex
overflow
除了visible
之外的值 (如:hidden
、auto
、scroll
)BFC 特性及应用
1. 同一个 BFC 下外边距会发生折叠
从结果来看,两个
div
元素都处在同一个BFC
容器下,也就是body
根元素。所以first
的下边距与second
的上边距发生重叠,且保留大的值。所以两个元素之间的距离只有100px
,而不是150px
。我们想要两个盒子不进行折叠,这时候只需要将两个盒子设置为
BFC
容器就可以了。这时候,两个盒子的垂直边距就变成了
150px
。2. BFC 可以包含浮动的元素(清除浮动)
浮动的元素会脱离标准文档流,我们看一个不设置
BFC
是的例子。我们来看看显示效果,这时候
box
容器没有出发BFC
,显示时child
是有浮动起来的,脱离文档流。由于
child
元素浮动,脱离了文档流,所以容器只剩下4px
的高度。现在我们让
box
触发BFC
,这时候就会将浮动元素包裹起来。我们看到,我们给
box
容器设置overflow: hidden
触发BFC
,将浮动元素也包裹进box
元素,清除了浮动效果。