块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
如何创建BFC?(取自MDN)
下列方式会创建块格式化上下文
- 根元素(
<html>
)- 浮动元素(元素的
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
或paint
的元素- 弹性元素(
display
为flex
或inline-flex
元素的直接子元素)- 网格元素(
display
为grid
或inline-grid
元素的直接子元素)- 多列容器(元素的
column-count
不为auto,包括 ``column-count
为1
)column-span
为all
的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中(标准变更,Chrome bug)。
块格式化上下文包含创建它的元素内部的所有内容.
BFC特性:
- 浮动定位和清除浮动时只会应用于同一个BFC内的元素。
- 浮动不会影响其它BFC中元素的布局,而清除浮动只能清除同一BFC中在它前面的元素的浮动。
- 外边距折叠只会发生在属于同一BFC的块级元素之间。
简单来说,BFC是一块可以将内部元素和外面分隔开的区域。
那么,BFC有什么用呢?
-
例子1,包裹脱离文档流的元素
有时候,脱离文档流(float或者绝对定位)会造成麻烦,来看看以下代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
border: 5px solid red;
}
.inner{
float:left;
width:200px;
height:200px;
background: url('../smile.jpg') no-repeat;
}
</style>
</head>
<body>
<div class="box">
<div class="inner"></div>
hello world
</div>
</body>
</html>
- 因为内部div设置了float(脱离了文档流),导致整个div没有被撑高。我们期望中的效果只是图片在div内部的左边。
- 给外层的div添加
overflow:auto
,创建一个BFC
.box{
border: 5px solid red;
overflow: auto;
}
-
效果:
-
例子2,解决外边距折叠问题
- 什么是外边距折叠?
块级元素的上外边距和下外边距有时会合并(或折叠)为一个外边距,其大小取其中的最大者,这种行为称为外边距折叠(margin collapsing),有时也翻译为外边距合并。注意浮动元素和绝对定位元素的外边距不会折叠。
- 产生外边距折叠的3种情况
- 相邻元素之间,毗邻的两个元素之间的外边距会折叠(除非后面的的元素清除浮动)
- 父元素与其第一个或最后一个子元素之间,如果在父元素与其第一个子元素之间不存在边框、内边距、行内内容,也没有创建块格式化上下文、或者清除浮动将两者的
margin-top
分开;或者在父元素与其最后一个子元素之间不存在边框、内边距、行内内容、height
、max-height
将两者的margin-bottom
分开,那么这两对外边距之间会产生折叠。此时子元素的外边距会“溢出”到父元素的外面。- 空的块级元素
-
下面这个例子就反映了两个相邻div的外边距折叠情况
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.inner1{
width:100%;
height:100px;
background-color: red;
margin-bottom: 20px;
}
.inner2{
width:100%;
height:100px;
background-color: green;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="inner1"></div>
<div class="inner2"></div>
</body>
</html>
-
效果:
- 两个相邻的元素的边距只有40px(两者最大值)
- 三个常用方法解决相邻元素外边距折叠
1.将下面的div设置为position:absolute
2.将下面的div设置为float:left
3.将下面的div设置为display:inline-block
-
还有一种情况,也就是大家常说的
外边距塌陷
,也就是父子之间的外边距合并问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
body{
background-color: yellow;
}
.outer{
width:400px;
height:400px;
background-color: red;
margin-top:20px;
}
.inner{
width:400px;
height:100px;
margin-top:50px;
background-color: green;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
- 给父元素设置了20px的上边距,子元素设置了50px的上边距,结果是两个边距被合并为一个(最大者)。
- 解决方案:(从原因入手:如果在父元素与其第一个子元素之间不存在边框、内边距、行内内容,也没有创建块格式化上下文、或者清除浮动将两者的 margin-top分开;)
1.父子元素之间添加内边距,给父元素添加padding-top:1px
2.创建BFC,给父元素添加overflow: hidden;或者overflow: auto;或者float: left;或者position: absolute;或者display: inline-block;
3.给父元素添加透明边框border: 1px solid transparent;