站在码农视角，轻松入门 BFC 格式化

2023-09-07 22:59:16

BFC 是一个神秘且抽象的概念，在许多前端开发教程中匆匆带过，使许多前端程序员感到难以理解和应用。但是，BFC 却是前端布局排版的核心基础之一，掌握它能帮助开发者轻松解决各种布局难题，达到意想不到的效果。

一、什么是 BFC？

在浏览器解析渲染 HTML 文档时，它会根据一定的规则将元素放置到网页上。BFC 是其中一个重要的规则，它定义了浏览器如何排列和对齐块级元素，而块级元素就是那些在页面上独占一行的元素，如 div、p、h1 等。

二、BFC 的作用

阻止垂直 margin 折叠 ：当两个块级元素相邻时，它们的垂直 margin 可能会发生折叠，即上一个元素的 bottom margin 与下一个元素的 top margin 合并为一个 margin。BFC 可以防止这种情况的发生，它会为其内部的块级元素创建一个独立的格式化上下文，使它们的 margin 不会与外部元素发生折叠。
浮动元素不会超出 BFC 的范围 ：当一个元素设置为浮动时，它会脱离正常文档流，并不会占据任何空间。但是，浮动元素仍然属于 BFC 的一部分，它不能超出 BFC 的范围。这就意味着，如果一个浮动元素的父元素是一个 BFC，那么浮动元素只能在父元素的范围内移动。
BFC 可以作为定位元素的参照物 ：绝对定位和固定定位的元素都会相对于某个参照物进行定位，而这个参照物通常就是 BFC。BFC 为这些定位元素提供了一个稳定的参照点，确保它们能够准确地定位。

三、如何创建一个 BFC？

创建一个 BFC 非常简单，只需要满足以下条件之一即可：

元素是根元素 ：根元素就是 <html> 元素，它是整个网页的根元素，它天生就是一个 BFC。
元素是块级元素，且具有以下属性之一 ：
- float：浮动元素是一个 BFC。
- display：当 display 属性的值为 block、inline-block、flex、grid 时，元素是一个 BFC。
- overflow：当 overflow 属性的值为 hidden、scroll、auto 时，元素是一个 BFC。
- position：当 position 属性的值为 absolute、fixed 时，元素是一个 BFC。