一、 什么是BFC
块级格式化上下文,Block Formatting Context,也就是常说的BFC,它是Web页面的可视化CSS渲染区域的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。
BFC的布局规则如下:
- 内部的盒子会在垂直方向,一个一个地放置
- BFC是页面上的一个隔离的独立容器
- 属于同一个BFC的两个相邻Box的上下margin会发生重叠
- 计算BFC的高度时,浮动元素也要参与计算
- 每个元素的左边,与包含的盒子的左边相接触,即使存在浮动也是如此
- BFC的区域不会与float重叠
创建了BFC的元素中的所有内容都会被包含在该BFC中。
BFC对浮动定位与清除浮动都很重要。浮动定位和清除浮动时只会应用同一个BFC内的元素。浮动不会影响其他BFC中元素的布局,而清除浮动只能清除同一BFC中在他前面的元素的浮动。外边距折叠也只会发生在属于同一BFC的块级元素之间。
下列方式会创建BFC:
- 根元素或包含根元素的元素,即body根元素
- 浮动元素,即
float
属性值不为none
(元素的position
为absolute
或fixed
) - 行内块元素(元素的
display
为inline-block
) - 表格单元格(元素的
display
为table-cell
,HTML表格单元格默认为该值) - 表格标题(元素的
display
为table-caption
,HTML表格标题默认为该值) - 匿名表格单元格元素(或者元素的
display
为table
、table-row
、table-row-group
、table-header-group
、table-footer-group
(分别是HTML table、row、tbody、thead、tfoot的默认属性)或inline-table) overflow
的值不为visible
的元素- display
值为
flow-root`的元素 - contain
值为
layout、
content或
strict`的元素 - 弹性元素(
display
为flex
或inline-flex
元素的直接子元素) - 网格元素(
display
为grid
或inline-grid
元素的直接子元素) - 多列容器(元素的
colunm-count
或column-width
不为auto
,包括column-count
为1) column-span
为all
的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器当中
二、BFC的特性及应用
两个相邻的普通流中的块元素垂直方向的margin会发生折叠
<style>
.p{
height: 50px;
width: 200px;
margin: 50px 0;
background: tomato;
}
</style>
</head>
<body>
<h1>1.两个相邻的普通流中的块元素垂直方向上的margin会折叠</h1>
<div class="p"></div>
<div class="p"></div>
</body>
之所以会发生这样的情况是因为根据BFC布局规则中所述,位于同一个BFC中的相邻两个盒子之间的上下margin会发生折叠。
如果我们想阻止这种情况发生,很容易想到只要让两者位于不同的BFC当中就可以做到了,比如:
<style>
.p{
height: 50px;
width: 200px;
margin: 50px 0;
background: tomato;
}
.wrap{
overflow: hidden;
}
</style>
</head>
<body>
<div class="p"></div>
<div class="wrap">
<div class="p"></div>
</div>
</body>
BFC可以包含浮动的元素
我们都知道在正常的情况下,浮动元素会脱离普通文档流,所以会有下面的代码
<div style="border:1px solid #000000">
<div style="width:100px;height:100px;background-color:gray;float: left;"></div>
</div>
会导致父元素塌陷这样的效果:
外面的div无法包含内部的div,但是如果我们触发外部容器的BFC,根据BFC布局规则,计算BFC高度时,浮动元素也要参与在内,那么外部容器将会包裹着浮动元素,通过这样的方式达到阻止父元素塌陷的效果。我们用最简单的触发BFC的方式,将容器元素的overflow属性值设为非visible
。
<div style="border:1px solid #000000;overflow:hidden;">
<div style="width:100px;height:100px;background-color:gray;float: left;"></div>
</div>
效果图如下:
BFC阻止元素被浮动元素覆盖
如果有这么一段代码:
<div style="width:100px;height:100px;background:#000;float: left;"></div>
<div style="width:400px;height:300px;background:sandybrown;"></div>
之所以会这样是因为BFC布局规则规定,每个元素的左边与包含的盒子的左边相接处,即使存在浮动也是如此。为了防止这种情况发生,同样我们可以通过触发BFC来完成:
<div style="width:100px;height:100px;background:#000;float: left;"></div>
<div style="width:400px;height:300px;background:sandybrown;overflow:hidden;"></div>
当然别的触发BFC的方式也能达到同样的效果。