1. 什么是 BFC ?
BFC (Block Formatting Contexts块级格式化上下文)
它是页面中的一块渲染区域,并且有着自己的一套渲染规则
具有 BFC 特性的元素可以看作是隔离了的独立容器
2. BFC 的形成条件
满足以下任意一个条件,即可触发 BFC
- float 的值不是
none
- position 的值不是
static
或者native
- display 的值是
inline-block
、table-cell
、flex
、table-caption
或着inline-flex
- overflow 的值不是
visible
3. BFC 的应用
在书写盒模型的margin
时,我们可能会遇到传递问题和叠加问题;
除此之外,我们可能还会遇到因为子元素浮动而使父容器高度塌陷的问题。
遇到这些问题时我们都可以通过使用 BFC 来解决
3.1) 解决margin传递问题
比如以下情况:
box2 的margin-top
传递到了 box1 那,即 box2 影响到了外面的元素 box1
<!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>BFC</title>
<style>
* {
margin: 0;
}
.box1 {
width: 300px;
height: 300px;
background: skyblue;
}
.box2 {
width: 130px;
height: 130px;
background: lightgreen;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
这时候,我们可以采用 BFC 来解决这个问题,因为利用 BFC,使 box1 成为一个独立的容器,无论里面的子元素如何变化,都不影响到外面的元素
.box1 {
width: 300px;
height: 300px;
background: skyblue;
overflow: hidden; /* 触发了 BFC 规则,形成了独立容器 */
}
3.2) 解决margin叠加问题
比如以下情况:
box1 和 box2 在垂直方向上会发生塌陷问题,在垂直方向上,它们之间的margin
会取两者之间最大的那一个的值
<!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>BFC</title>
<style>
* {
margin: 0;
}
.box1 {
width: 300px;
height: 300px;
background: skyblue;
margin-bottom: 40px;
}
.box2 {
width: 130px;
height: 130px;
background: lightgreen;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
我们可以使 box1 和 box2 成为一个名为 box 类的 div 的子元素,然后使这个盒子具有 BFC,成为一个独立的容器,解决高度塌陷的问题
<!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>BFC</title>
<style>
* {
margin: 0;
}
.box {
overflow: hidden; /* 触发了 BFC 规则,形成了独立容器 */
}
.box1 {
width: 300px;
height: 300px;
background: skyblue;
margin-bottom: 40px;
}
.box2 {
width: 130px;
height: 130px;
background: lightgreen;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
<div class="box">
<div class="box2"></div>
</div>
</body>
</html>
3.3) 解决浮动高度塌陷
比如以下情况:
一开始,box1 作为父容器没有高度,它的高度由子元素 box2 的高度撑起来的
<!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>BFC</title>
<style>
* {
margin: 0;
}
.box1 {
width: 300px;
border: 1px black solid;
}
.box2 {
width: 120px;
height: 120px;
background: lightgreen;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
这时,如果我们把 box2 设置为浮动,那么它将脱离文档流,对 box1 这个父容器的高度造成影响,出现下面情况。
.box2 {
width: 120px;
height: 120px;
background: lightgreen;
float: left;
}
这个时候,遇到这种因为浮动,父容器高度塌陷的问题,我们可以对父容器使用 BFC ,使其成为一个独立的容器(抽象的理解:将子元素困于其中,所以子元素就算设置为了浮动,它的高度也会被计算进父容器的高度里面去)
.box1 {
width: 300px;
border: 1px black solid;
overflow: hidden; /* 触发了 BFC 规则,形成了独立容器 */
}