☠ BFC 是什么?
BFC 的全称是 Block Formatting Context
,名为 “块级格式化上下文”。是页面上用于渲染 CSS 的一个区域,相当于一个小型布局,块级元素和浮动元素会根据这块区域进行布局。
☠ 触发 BFC 方法?
触发 BFC 的方法如下:
- 根元素
<html>
- 意味着整个 HTML 文档就是一个大的 BFC 容器
float
的值不为none
position
的值不为static
或者relative
display
的值为table-cell
、table-caption
、inline-block
、flex
和inline-flex
中的其中一个overflow
的值不为visible
display: flow-root
(建议使用这个css属性)
☠ BFC 的特性
BFC 部分特性如下:
- 内部的块级元素会相互堆叠在一起沿页面向下排列,而行内元素则会相互并列。
- 处于同一个 BFC 中的元素相互影响,可能会发生外边距重叠。
- 计算触发 BFC 元素的高度时,浮动元素也会参与计算。
(避免父元素高度坍塌原理)
- 浮动元素不会覆盖到触发 BFC 元素上。
(阻止元素被浮动元素覆盖原理)
- 触发 BFC 的元素会处于一个完全独立的空间,使其子元素的布局不会影响到外面元素的布局。
(避免外边距重叠原理)
☠ BFC 的应用
1. 清除浮动,避免高度坍塌
正常情况下(子元素未设置浮动):
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 700px;
margin-top: 50px;
margin-left: 50px;
background: #ccc; /* 灰色 */
}
.left {
width: 200px;
height: 200px;
box-sizing: border-box;
border: 3px solid orange;
background: #73DE80; /* 绿色 */
}
.right {
width: 400px;
height: 100px;
box-sizing: border-box;
border: 3px solid orange;
background: #F31264; /* 红色 */
}
</style>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
![](https://i-blog.csdnimg.cn/blog_migrate/e09257d644000691e913e1c54b554960.png)
在此情况下,父元素的高度是两个子元素的高度之和。
左边子元素设置浮动,导致父元素高度坍塌:
<!-- 代码差异 -->
<style>
.left {
float: left;
}
</style>
![](https://i-blog.csdnimg.cn/blog_migrate/0322d3d457f5010a440bd6bcbdd63c9e.png)
可以看到,此时父元素的高度和右边子元素的高度一致,说明父元素的高度在计算时并不会包含浮动元素的高度。
父元素利用 BFC 特性来清除浮动,使其计算高度时包含浮动元素:
<!-- 代码差异 -->
<style>
.box {
overflow: hidden;
}
.left {
float: left;
}
</style>
![](https://i-blog.csdnimg.cn/blog_migrate/1025f1149370d474373c55244ce7d954.png)
父元素通过触发 BFC,利用 BFC 的特性使其在计算高度时包含浮动元素。
2. 阻止元素被浮动元素覆盖
上面例子中虽然解决了父元素高度坍塌问题,但处于浮动状态的左边子元素覆盖了右边子元素,这并不是我们想要的布局,那么如何使两个子元素并列呢?
可以使用前面提到的 BFC 特性的第4点(浮动元素不会覆盖到触发 BFC 元素上),只需要让右边子元素触发 BFC 即可。
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 700px;
margin-top: 50px;
margin-left: 50px;
background: #ccc; /* 灰色 */
overflow: hidden;
}
.left {
width: 200px;
height: 200px;
box-sizing: border-box;
border: 3px solid orange;
background: #73DE80; /* 绿色 */
float: left;
}
.right {
width: 400px;
height: 100px;
box-sizing: border-box;
border: 3px solid orange;
background: #F31264; /* 红色 */
overflow: hidden;
}
</style>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
![](https://i-blog.csdnimg.cn/blog_migrate/7a44a24d12e73fa05ef4d4ebb2fedc4b.png)
可以看到两个子元素处于并列状态。
注意:如果父元素的宽度不够,那么右边子元素会换行展示。
3. 避免外边距重叠
默认情况下,垂直方向上两个相邻的盒子的外边距会重叠:
<style>
.box {
width: 400px;
margin-top: 50px;
margin-left: 50px;
background: #ccc; /* 灰色 */
}
.top,
.bottom {
width: 200px;
height: 200px;
background: orange;
}
.top {
margin-bottom: 20px;
}
.bottom {
margin-top: 20px;
}
</style>
<body>
<div class="box">
<div class="top"></div>
<div class="bottom"></div>
</div>
</body>
按照我们写的样式,两个盒子中间的距离应该是 40px
才对,但实际上只有 20px
,说明它们的外边距发生了重叠现象。
使两个盒子分别处于不同的 BFC 容器中,有着各自的布局环境:
<!-- 代码差异 -->
<style>
.bfc {
overflow: hidden;
}
</style>
<body>
<div class="box">
<div class="bfc">
<div class="top"></div>
</div>
<div class="bfc">
<div class="bottom"></div>
</div>
</div>
</body>
![](https://i-blog.csdnimg.cn/blog_migrate/6641cdfd0ecd19ad2b71980820e85da3.png)
此时两个盒子都有着自己的布局环境,互不影响。