一、BFC概念
BFC全名为块级格式化上下文，它是一个独立的渲染区域，其内部的盒子如何布局只遵循块级格式化上下文的规则，不受外部元素的干扰
二、如何定义BFC
- 当前元素的float属性不为none
- 当前元素的position属性不为static和relative
- 当前元素的overflow属性不为visible
- 当前元素的display属性是inline-block、table-cell、flex、table-caption和inline-flex
三、BFC的布局规则
- 每个盒子都占一行，在垂直方向上放置（普通文档流布局也是）
- 同一个BFC中，盒子垂直方向的margin会重叠（普通文档流布局也会，但是如果一个是BFC，另一个不是就可以避免重叠）
- BFC区域不会与float Box重叠（普通文档流布局是会覆盖浮动元素的位置）
- BFC就是页面上独立的一个容器，容器里面的元素不会影响到元素外面的元素
- 对于BFC来说，其高度的计算是把float算在里面的（普通文档流布局是不会被父级计算的）
- 对于BFC来说，margin不会传递给父级，但是普通文档流会将margin传递给父级
四、对于布局规则的解释
- 同一个BFC中，盒子垂直方向的margin会重叠（普通文档流布局也会，但是如果一个是BFC，另一个不是就可以避免重叠）
<!DOCTYPE html>
<html lang="en">
<style>
* {
margin: 0;
padding: 0;
}
.top, .center {
width: 100px;
height: 100px;
}
.top {
background-color: aqua;
margin-bottom: 10px;
}
.center {
background-color: bisque;
margin-top: 10px;
display: inline-block;
}
</style>
<body>
<div class="top">
<div></div>
</div>
</body>
</html>
- BFC区域不会与float Box重叠（普通文档流布局是会覆盖浮动元素的位置）
①普通文档流
<!DOCTYPE html>
<html lang="en">
<style>
* {
margin: 0;
padding: 0;
}
.top {
width: 100px;
height: 100px;
background-color: aqua;
float: left;
}
.center {
width: 500px;
height: 500px;
background-color:blue;
}
</style>
<body>
<div class="top"></div>
<div class="center"></div>
</body>
</html>
效果图：后面那个box会覆盖上一个浮动的box
②BFC布局
<!DOCTYPE html>
<html lang="en">
<style>
* {
margin: 0;
padding: 0;
}
.top {
width: 100px;
height: 100px;
background-color: aqua;
float: left;
}
.center {
width: 500px;
height: 500px;
overflow: hidden;
background-color:blue;
}
</style>
<body>
<div class="top"></div>
<div class="center"></div>
</body>
</html>
效果图：第二个box会将第一个float的box覆盖
- 对于BFC来说，其高度的计算是把float算在里面的（普通文档流布局是不会被父级计算的）
①普通文档流
<!DOCTYPE html>
<html lang="en">
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 500px;
background-color: black;
/* overflow: hidden; */
}
.child {
width: 100px;
height: 100px;
background-color: aqua;
float: left;
margin: 10px;
}
</style>
<body>
<div class="father">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
效果图：father这个box不会有高度
②BFC布局：father的高度会把子元素float box的高度计算进去
与上的唯一区别是 father添加overflow: hidden
对于BFC来说，margin不会传递给父级，但是普通文档流会将margin传递给父级
①普通文档流：center的父级的盒子的margin不会向上传递，center_father的高度和center的height相同
<!DOCTYPE html>
<html lang="en">
<style>
* {
margin: 0;
padding: 0;
}
.top {
width: 100px;
height: 100px;
background-color: aqua;
margin-bottom: 10px;
}
.center_father {
background-color: blueviolet;
}
.center {
width: 500px;
margin-top: 10px;
height: 500px;
background-color:blue;
}
</style>
<body>
<div class="top"></div>
<div class="center_father">
<div class="center"></div>
</div>
</body>
</html>
效果图：
②BFC布局下margin会传递
<!DOCTYPE html>
<html lang="en">
<style>
* {
margin: 0;
padding: 0;
}
.top {
width: 100px;
height: 100px;
background-color: aqua;
margin-bottom: 10px;
}
.center_father {
overflow: hidden;
background-color: blueviolet;
}
.center {
width: 500px;
margin-top: 10px;
height: 500px;
background-color:blue;
}
</style>
<body>
<div class="top"></div>
<div class="center_father">
<div class="center"></div>
</div>
</body>
</html>
效果图：
