什么是BFC？BFC的形成条件？BFC的应用场景

qq_52822043

已于 2022-09-15 09:20:08 修改

阅读量2.4k

点赞数 2

CC 4.0 BY-SA版权

文章标签： html 前端 css

于 2022-09-15 09:18:23 首次发布

本文链接：https://blog.csdn.net/qq_52822043/article/details/126863772

本文详细解析了BFC的概念，包括如何通过position属性和float属性创建BFC，以及BFC在解决margin合并、清除浮动和自适应布局中的关键作用。通过实例演示展示了BFC在前端开发中的实战应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

一、BFC是什么？

二、什么是BFC

1.定位元素为absolute或者fixed时，脱离文档流和文本流

2. 元素的float属性值不为none，脱离文档流、但是不脱离文本流

三、BFC的应用场景

1. 防止两个相邻块级元素的上下margin值发生重叠 -> 上下margin合并问题

2. 清除浮动

3.实现自适应布局，防止元素被浮动元素覆盖 -> 左边固定，右边自适应

前言

什么是BFC？

BFC的形成条件

BFC的应用场景

一、BFC是什么？

BFC 是块级格式化上下文，是在盒模型下对块级元素进行布局的独立渲染区域，该渲染区域内的元素和区域外的元素是相互隔离的。不同BFC内部的元素互不影响。

二、BFC的形成条件

1.根元素：html

2.定位元素：元素的position属性值为absolute或者fixed时，脱离文档流和文本流

3.浮动元素：元素的float属性值不为none，脱离文档流、但是不脱离文本流

4.visibility属性：元素的visibility属性值不为visible时

5.布局：布局为inline-block、flex、table-cell、grid时

1.定位元素为absolute或者fixed时，脱离文档流和文本流

源码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .left {
        position: fixed;
        left: 0;
        top: 50%;
        transform: translate(0, -50%);

        width: 80px;
        height: 300px;
        background-color: red;
      }

      .box {
        position: relative;

        width: 300px;
        height: 300px;
        background-color: skyblue;
        margin: 0 auto;
      }

      .box1 {
        position: absolute;
        top: 0;
        left: 0;
        /* top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); */

        width: 50px;
        height: 50px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="left">固定定位</div>
    <div class="box">
      不是定位元素
      <div class="box1">绝对定位</div>
    </div>
  </body>
</html>

2. 元素的float属性值不为none，脱离文档流、但是不脱离文本流

源码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .left {
        float: left;
        left: 0;
        width: 100px;
        height: 100px;
        background-color: pink;
      }

      .right {
        float: right;
        right: 0;
        width: 200px;
        height: 200px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div class="box">
      不是浮动元素
      <div class="left">浮动元素1</div>
      <div class="right">浮动元素2</div>
    </div>
  </body>
</html>

三、BFC的应用场景

1. 防止两个相邻块级元素的上下margin值发生重叠 -> 上下margin合并问题

属于同一BFC的，相邻块级元素的margin值会重叠，如果想让它们不重叠，可以让两个块级元素分别属于不同的BFC。

以下示例代码中的两个盒子的上下外边距会重合（即它们都设置了20px的外边距，期望它们之间的间距是 40px，但实际效果却只有 20px）：

<style>
      .box1 {
        width: 200px;
        height: 100px;
        /* 下边距20px */
        margin-bottom: 20px;
        background-color: pink;
      }

      .box2 {
        width: 100px;
        height: 100px;
        /* 上边距20px */
        margin-top: 20px;
        background-color: skyblue;
      }
    </style>

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

想让上下边距不合并，需要其中一个盒子触发BFC：

<style>
      .box1 {
        /* 触发BFC */
        display: inline-block;

        width: 200px;
        height: 100px;
        /* 下边距20px */
        margin-bottom: 20px;
        background-color: pink;
      }

      .box2 {
        width: 100px;
        height: 100px;
        /* 上边距20px */
        margin-top: 20px;
        background-color: skyblue;
      }
    </style>

2. 清除浮动

以下示例代码实现时，父元素容器box1的高度为0。父元素box1没有设置高度，希望由子元素的高度撑开box1的高度，但是子元素box2都为浮动元素，在这种情况下，父元素的高度不能自适应的伸开，并且会将内容溢出到box1容器外部，这种现象叫浮动溢出。

<style>
      .box1 {
        /* 父元素只有宽度，没有高度，希望由子元素撑开 */
        /*  当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素 */
        /* 在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象
        这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。 */
        width: 200px;
        background-color: red;
      }

      .box2 {
        float: left;
        background-color: green;
      }
    </style>

<div class="box1">
      <div class="box2">Hello,world</div>
      <div class="box2">Hello,world</div>
      <div class="box2">Hello,world</div>
    </div>

解决这一问题的方法之一就是触发BFC清除浮动。

<style>
      .box1 {
        /* 父元素只有宽度，没有高度，希望由子元素撑开 */
        /*  当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素 */
        /* 在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象
        这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。 */
        width: 200px;
        background-color: red;

        /* 清除浮动 */
        overflow: hidden;
      }

      .box2 {
        float: left;
        background-color: green;
      }
    </style>

3.实现自适应布局，防止元素被浮动元素覆盖 -> 左边固定，右边自适应

以下示例中，box2 会被设置了浮动的 box1 覆盖：

<style>
      .box1 {
        float: left;
        /* 左边固定宽度 */
        width: 300px;
        background-color: red;
        height: 200px;
      }

      .box2 {
        /* 右边不设置宽度 */
        background-color: blue;
        height: 300px;
      }
    </style>

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

解决这一问题的方法之一就是让右边的box2触发BFC，达到不被覆盖的效果。

<style>
      .box1 {
        float: left;
        /* 左边固定宽度 */
        width: 300px;
        background-color: red;
        height: 200px;
      }

      .box2 {
        /* 右边不设置宽度 */
        background-color: blue;
        height: 300px;

        /* 触发BFC */
        overflow: hidden;
      }
    </style>