BFC，即块级格式上下文，是页面的中的一块渲染区域，有自己的一套渲染规则；
规则
- 区域内部的盒子会在垂直方向上一个接一个的放置；
- BFC内部相邻的盒子会发生margin重叠，与方向无关；
- BFC的区域不会与浮动区域发生重叠；
- 在计算BFC区域的高度时，浮动子元素也会参与计算；
- BFC本质上就是一个独立的容器，容器内部的子元素不会影响到外部的元素；
其实简单来讲，BFC的目的就是形成一块独立的区域，你可以在内部进行自定义布局，不会影响到外界；
触发条件
想要得到一块BFC区域，肯定有其必要的条件，总结如下：
- 根元素：HTML元素；
- 浮动元素：float值为left/right;
- overflow:hidden,scroll,auto;
- display:flex,grid,inline-grid,table,inline-table,inline-block;
- position的值：absolute或者fixed;
应用场景
BFC有其独特的规则，那么其规则就可以帮助我们去解决问题，进而就会有其对应的不同的应用场景；
-
防止margin重叠(塌陷)
- 有这样一个场景，两个p标签，第一个p标签margin-bottom:100px;第二个p标签margin-top: 100px;由于同一个BFC内部相邻的盒子会发生margin重叠，取两者最大值，那么两个p标签之间的距离还是100px,而不是我们想要的200px；
- 为了解决这个问题，可以给第二个p标签外部再套上一个容器，并触发这个容器成为一个BFC区域，这样不属于同一个BFC,就解决了margin重叠的问题；
<style>
.wrap {
overflow: hidden;// 新的BFC
}
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p >
<div class="wrap">
<p>Hehe</p >
</div>
</body>
</html>
-
清除内部浮动
- 子元素设置浮动后，不会撑开父元素的高度；
- BFC规则中计算高度的时候，也会计算浮动子元素的高度，进而可以去解决这个问题；
<style>
.par {
border: 5px solid #fcc;
width: 300px;
overflow: hidden;
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
</div>
</body>
-
自适应两栏布局
- BFC区域不会与浮动区域重叠，利用这个规则，可以实现右边自适应的两栏布局；
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
overflow: hidden;
}
-
中间自适应三栏布局
- display:flex会形成一个BFC区域，那么两边浮动并固定，中间部分flex:1填充并自适应；
body {
display: flex;
}
.left {
height: 150px;
background-color: pink;
width: 200px;
float: left;
}
.main {
height: 200px;
background-color: orange;
flex: 1;
}
.right {
background-color: skyblue;
height: 150px;
width: 300px;
float: right;
}
这个就是对BFC的定义，规则以及应用场景的一个简单明了的介绍，当然BFC的应用场景还有很多，可以在开发使用的过程中加以整理；希望大家多多点赞，算是给我的一点小小的鼓励。
