前言
BFC(块级上下文)是CSS学习过程必须要搞懂的一个点,浮动元素和绝对定位元素,非块级盒子的块级容器,以及overflow值不为"visiable"的块级盒子(如flex布局的直接子元素),都会为他们的内容创建新的BFC(Block Fromatting Context, 即块级格式上下文)。
防止父元素高度塌陷
看下面这个场景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<style>
body {
background-color: #222;
height: 100vh;
width: 100vw;
/* display: flex;
align-items: center; */
margin: 0;
}
.tar {
margin: 0 10px;
background-color: #fff;
color: blue;
border: #2e2 2px solid;
}
.ind {
height: 100px;
float: left;
}
</style>
<div class="tar">
<div class="ind">
this is a new fojwd, wbdun, shuan, asdwodj and siht
</div>
</div>
</body>
</html>
如果我们为父元素建立bfc,如加入
overflow :hidden
或者把body中的flex相关注释取消掉。具体方式我们见前文。
避免外边距折叠
<!--
* @Date: 2020-01-18 18:45:14
* @LastEditors : Asen Wang
* @LastEditTime : 2020-01-18 20:20:06
* @content: I
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<style>
.tar {
border: 2px solid #23e;
margin: 10px;
}
body {
margin: 0;
}
</style>
<div class="tar">1</div>
<div class="tar">2</div>
<div class="tar">3</div>
</body>
</html>
可以看到,尽管我们给每个块都加了10px的上下margin,但是每个块之间仍然只有10px的margin。
不仅仅有这种体现,还有个典型的例子:
<!--
* @Date: 2020-01-18 18:45:14
* @LastEditors : Asen Wang
* @LastEditTime : 2020-01-18 20:25:42
* @content: I
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<style>
.tar {
background-color: #e21;
/* border: #2e2 1px solid; */
}
.rte {
border: 2px solid #2e2;
margin-top: 10px;
}
body {
margin: 0;
}
</style>
<div class="tar">
<div class="rte">
123
</div>
</div>
</body>
</html>
我们发现这里由于外边距折叠的问题导致.rte的父元素也随着子元素有了margin效果,这种情况除了给父元素建立bfc,还可以通过取消注释,给父元素加边框的方式实现。