Css - 块格式化上下文（BFC）
2019-10-07 本文已影响0人
ElricTang
块格式化上下文（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>
例子1
- 因为内部div设置了float（脱离了文档流），导致整个div没有被撑高。我们期望中的效果只是图片在div内部的左边。
- 给外层的div添加
overflow:auto，创建一个BFC
.box{
border: 5px solid red;
overflow: auto;
}
-
效果：
例子1
-
例子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;
外边距塌陷解决
