likes
comments
collection
share

谈谈你对BFC容器的理解

作者站长头像
站长
· 阅读数 17

前言

谈谈你对BFC容器的理解，这在前端面试中，是一个非常容易被问到的问题，很多小伙伴也许了解BFC容器的规则，但是想完整的表述出来，还是需要一番思索。在这篇文章中，我会给大家分享从几个点来回答面试官这个问题。

正文

BFC容器是什么？

首先我们来看看官方的概念：

块级格式化上下文（Block Formatting Context，BFC）是指在HTML文档中的一个独立渲染区域，其中的块级元素会按照一定的规则进行布局和渲染。BFC具有一套特定的渲染规则，这些规则影响着BFC内部元素的布局和外部元素的交互。

这段话有点复杂，我用自己的话来概括一下，小伙伴们方便记忆：

BFC是块级格式化上下文，是页面中一个渲染区域，有一套属于自己的渲染规则

BFC容器的渲染规则

  1. BFC容器在计算高度时，浮动元素的高度也会计算在内：

    • 当一个元素形成了BFC，它会包含在BFC内部的所有内容，包括浮动元素。这意味着，如果一个元素触发了BFC，它的高度计算将考虑到内部浮动元素的高度。这种特性是BFC解决浮动引起的父元素塌陷的一种方式。因此，BFC容器内部的浮动元素不会导致父元素的高度塌陷为0。

  2. BFC容器内的子元素的margin-top不会和BFC这个父容器发生重叠：

    • 在BFC中，相邻块级元素的垂直外边距（margin）不会发生重叠。这意味着，BFC容器内部的子元素的上外边距不会与其父容器的边框发生重叠，也不会与同级其他元素的上外边距发生重叠。这有助于保持布局的清晰性和可预测性。

  3. 遵照从上往下从左往右的布局排列：

    • 在BFC中，内部的块级元素会按照文档流的顺序从上往下、从左往右进行布局排列。这意味着，BFC内部的块级元素不会随意漂浮或重叠，它们会按照其在HTML文档中出现的顺序依次排列，从左到右，从上到下。

以上三点是BFC容器的渲染规则，在面试时小伙伴们只需给面试官回答加粗的文字就行了。

触发条件

  1. position属性：元素的position属性值为absolute或fixed。

  2. overflow属性：元素的overflow属性值不为visible。

  3. display属性：元素的display属性值为inline-block、table-cell、table-caption、flex、inline-flex。

  4. float属性: 元素的float不为none

应用

清除浮动：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      border: 1px solid black;
      overflow: hidden; /* 触发 BFC */
    }
    .float-box {
      float: left;
      width: 100px;
      height: 100px;
      background-color: red;
      margin-right: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="float-box"></div>
    <div class="float-box"></div>
    <div class="float-box"></div>
  </div>
</body>
</html>

在这个例子中，.container 的 overflow 属性被设置为 hidden，触发了它的BFC特性，使得它可以包含内部浮动的子元素，并且能够正常计算高度，从而防止父元素的高度塌陷。

对浮动属性不太了解的小伙伴们可以翻翻我前面的文章。