CSS系列之什么是BFC?如何形成?应用场景有哪些
yuanyuanbyte opened this issue · 0 comments
yuanyuanbyte commented
什么是BFC?
块格式化上下文(Block Formatting Context,BFC),它是一个独立的渲染区域,与区域外部毫不相干。
如何形成BFC?
下列方式会创建块格式化上下文(BFC):
应用场景有哪些?
1. 防止外边距塌陷
创建新的 BFC 避免两个相邻 <div>
之间的 外边距合并 问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.blue,
.red-inner {
height: 50px;
margin: 10px 0;
}
.blue {
background: blue;
}
.red-outer {
/* 通过overflow: hidden创建新的BFC */
overflow: hidden;
background: red;
}
</style>
</head>
<body>
<div class="blue"></div>
<div class="red-outer">
<div class="red-inner">red inner</div>
</div>
</body>
</html>
如果我们取消BFC,注释掉 overflow: hidden;
这行代码
.red-outer {
/* 通过overflow: hidden创建新的BFC */
/* overflow: hidden; */
background: red;
}
从上图可以发现外边距塌陷了,这就是BFC的效果。
2. 防止浮动导致父元素高度塌陷
<!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>
<style>
.container {
border: 10px solid red;
}
.inner {
background: #08BDEB;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="inner"></div>
</div>
</body>
</html>
上面的代码效果如下:
接下来将inner元素设为浮动:
.inner {
float: left;
background: #08BDEB;
height: 100px;
width: 100px;
}
会产生这样的塌陷效果:
但如果我们对父元素设置BFC后, 这样的问题就解决了:
.container {
border: 10px solid red;
/* 通过overflow: hidden讲父盒子设置为BFC */
overflow: hidden;
}
这也是清除浮动的一种方式。