【CSS】深入理解：BFC究竟是什么?

devtools/2024/9/18 12:27:41/ 标签: css, 前端

深入理解：BFC究竟是什么？

在我们了解BFC之前，我们先来看看什么是FC

1. FC的概念

FC全称 Formatting Context ,元素在标准流里面都属于一个FC

块级元素的布局都属于Block Formatting Context,也就是BFC
- block level box都是在BFC中布局的
行内级元素的布局都属于Inline Formatting Context，IFC

2. BFC - Block Formatting Context

2.1 什么是BFC呢？怎么创造BFC？

常见的形成BFC的场景

根元素（html,:root）
浮动元素（float属性部位none）
绝对定位元素（absolute或fixed）
行内快元素（display为inline-block）
表格单元格（元素的display为table-cell(默认)）
表格标题（display为table-caption）
匿名表格单元格格式（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、 row、tbody、thead、tfoot 的默认属性）或 inline-table）
overflow属性值不是“visible”的元素
弹性元素（flex布局）
网格元素（gird布局）

2.2 BFC的作用

在BFC中，box会垂直方向上一个挨着一个排布
垂直方向的属性由magin决定
同一个BFC中，两个相邻的box上下之间的margin会折叠（规定）
BFC中，每个元素的左侧边缘都是紧挨着包含块的左边缘

这就是浏览器如何排布我们的元素

2.3 利用BFC解决块级元素的margin上下折叠问题

css">.box {width: 100px;height: 100px;
}
.box1 {background-color: pink;margin-bottom: 50px;
}
.box2 {margin-top: 30px;background-color: purple;
}

<div class="box box1"></div>
<div class="box box2"></div>

在上述的代码中，box1和box2在同一个BFC中，（根元素html）会创建一个BFC，所以会折叠，两个box之间的距离为50px,我们可以利用BFC来解决这个问题

<div class="container"><div class="box box1"></div>
</div>
<div class="box box2"></div>

用一个div盒子来包裹box1

css">.container {overflow: auto;
}

当我们给box1的父盒子container设置overfolw的属性为auto时，此时container会开启一个BFC，此时，box1和box2并不是属于同一个BFC，所以不会出现margin上下折叠的问题

2.4 为什么BFC会解决浮动元素高度塌陷的问题呢？

网上有很多的说法，BFC可以解决浮动元素的塌陷问题，实现清除浮动的效果，那么请看这个案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>css">ul,li {padding: 0;margin: 0;list-style: none;}.box ul {width: 330px;height: 150px;background-color: orange;overflow: hidden;}.box li {float: left;width: 100px;height: 100px;margin: 0 10px 10px 0;background-color: pink;}</style></head><body><div class="box"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div></body>
</html>