目录
一、什么是 BFC？
1.BFC 的定义
BFC：Block Formatting Context，块级格式化上下文 。
在官方文档到中是这么介绍的，一个 BFC 区域包含创建该上下文元素的所有子元素，但是不包括创建了新的 BFC 的子元素的内部元素，BFC 是一块块独立的渲染区域，可以将BFC 看成是元素的一种属性，拥有了这种属性的元素就会使他的子元素与世隔绝，不会影响到外部其他元素。
2.BFC 的规则
- BFC 就是一个块级元素，块级元素会在垂直方向一个接一个的排列
- BFC 就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
- 垂直方向的距离由 margin 决定， 属于同一个 BFC 的两个相邻的标签外边距会发生重叠
- 计算 BFC 的高度时，浮动元素也参与计算
详解：
<div class="box1" id="HM_bfc1">
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5" id="HM_bfc2">
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
</div>
</div>假设box1和box5是两个 BFC 区域，那么根据上述原理能理解到的就是，box1 这个 BFC 区域包含了子元素 box2，box3，box4，box5，但不包括 box6，box7，box8。而 box5 这块 BFC 区域则包含了 box6，box7，box8 这三个子元素。
总结：
- 每一个 BFC 区域只包括其子元素，不包括其子元素的子元素。
- 每一个 BFC 区域都是独立隔绝的，互不影响。
二、怎样使一个元素变成 BFC 区域（怎样触发 BFC）？
常用有以下几种办法：
- 设置浮动，不包括 none
- 设置 overflow，即 hidden，auto，scroll
- 行内块显示模式 display，inline-block
- 设置定位 position，absoulte 或者 fixed
- 表格单元格 display，table-cell
- 弹性布局 display，flex
三、BFC 到底有什么作用（BFC解决了什么问题）？
1.解决外边距的塌陷问题（垂直塌陷）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lightly-HTML-Project</title>
<style>
.HM {
width: 200px;
height: 200px;
background-color: red;
margin: 100px;
}
</style>
</head>
<body>
<div class="HM"></div>
<div class="HM"></div>
</body>
</html>效果如下：
原因是 margin 垂直塌陷。要解决这个问题只需要给这两个盒子都加一个父元素，并且将这个父元素设置成 BFC 区域，就可以解决 margin 塌陷的问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lightly-HTML-Project</title>
<style>
.HM_bfc {
overflow: hidden;
}
.HM {
width: 200px;
height: 200px;
background-color: red;
margin: 100px;
}
</style>
</head>
<body>
<div class="HM_bfc">
<div class="HM"></div>
</div>
<div class="HM_bfc">
<div class="HM"></div>
</div>
</body>
</html>效果如下：
2.利用BFC解决包含塌陷
有时候我们给子元素加 margin 可能会带着父元素一起跑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lightly-HTML-Project</title>
<style>
.father{
width: 300px;
height: 300px;
background-color: red;
}
.son{
width: 100px;
height: 100px;
background-color: pink;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
效果如下：
这个问题用 padding 可以解决问题，但是用 BFC 同样可以解决，只需要将父元素变为BFC区域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lightly-HTML-Project</title>
<style>
.father{
width: 300px;
height: 300px;
background-color: red;
overflow: hidden;
}
.son{
width: 100px;
height: 100px;
background-color: pink;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
3.BFC 可以阻止标准流元素被浮动元素覆盖
浮动的元素会脱离文档流，跑到上一个层面，也就是和原本的元素不在一个层面了。所以可能会导致浮动元素覆盖基本元素的问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lightly-HTML-Project</title>
<!-- <link type="text/css" rel="stylesheet" href="css/style.css"/>
<script type="text/javascript" src="js/script.js"></script> -->
<style>
.red{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.blue{
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
</body>
</html>
效果如下：
只需要让蓝色区域触发 BFC ，就可以做到不受浮动元素影响。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lightly-HTML-Project</title>
<!-- <link type="text/css" rel="stylesheet" href="css/style.css"/>
<script type="text/javascript" src="js/script.js"></script> -->
<style>
.red{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.blue{
height: 300px;
background-color: blue;
overflow: hidden;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
</body>
</html>
效果如下：
4.清除浮动
浮动会导致父元素高度塌陷，那大家还记得怎么清除浮动吗？相信很多人都知道：overflow：hidden嘛。相信在认识BFC之前大家肯定不太清楚为什么overflow：hidden可以清除浮动。现在知道了，BFC区域内的子元素任何边动都是不会影响到外部元素的。所以 BFC 区域可以清除浮动带来的影响。这里就不举例说明了。