返回

3 分钟搞定 BFC，理解格式化上下文，从此扫除页面元素的排版难题！

前端

BFC 是什么？#

BFC，全称是 Block Formatting Context，即块格式化上下文，是 CSS 布局中一个重要的概念。它是网页中的一块区域，在这个区域内，元素的布局不受父元素和其他元素的影响，只受到自身的属性影响。BFC 可以用来解决浮动、重叠等布局问题，是 CSS 布局中非常有用的一个技巧。

BFC 的作用

  • BFC 可以解决浮动元素的重叠问题。
  • BFC 可以使元素在垂直方向上对齐。
  • BFC 可以使元素在水平方向上对齐。
  • BFC 可以使元素在页面中居中对齐。

如何创建 BFC

创建 BFC 的方法有很多，最常见的方法有以下几种：

  • 给元素设置 float 属性（浮动）。
  • 给元素设置 overflow 属性（溢出）。
  • 给元素设置 position 属性（定位）。
  • 给元素设置 display 属性（显示）。

BFC 在实际布局中的应用

BFC 在实际布局中有很多应用，比如：

  • 用 BFC 来解决浮动元素的重叠问题。
  • 用 BFC 来使元素在垂直方向上对齐。
  • 用 BFC 来使元素在水平方向上对齐。
  • 用 BFC 来使元素在页面中居中对齐。

BFC 是 CSS 布局中一个非常有用的技巧，可以帮助我们解决很多布局问题。如果你想成为一名合格的前端工程师，那么就必须掌握 BFC 的知识。

BFC 的优缺点

BFC 虽然是一个非常有用的技巧，但它也有一些缺点。

优点：

  • 可以解决浮动元素的重叠问题。
  • 可以使元素在垂直方向上对齐。
  • 可以使元素在水平方向上对齐。
  • 可以使元素在页面中居中对齐。

缺点：

  • 会增加页面的渲染时间。
  • 会使元素脱离文档流。
  • 会使元素的父元素的高度塌陷。

使用 BFC 时需要注意什么？

在使用 BFC 时，需要注意以下几点：

  • 不要滥用 BFC。
  • 不要在 BFC 中使用浮动元素。
  • 不要在 BFC 中使用绝对定位元素。
  • 不要在 BFC 中使用 overflow 属性。

BFC 相关资源