何为BFC？

最新推荐文章于 2025-09-27 13:57:27 发布

原创最新推荐文章于 2025-09-27 13:57:27 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端 #html

一、BFC的简介

BFC（Block Formatting Context）称为块级格式化环境，其实BFC是一个CSS中一个隐含的属性，可以为一个元素开启BFC，开启BFC后该元素会变成一个独立的布局的区域。

二、BFC的布局规则

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离有margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
每个元素的左外边缘（margin-left)，与包含块的左边（contain box left）相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。除非这个元素自己形成了一个新的BFC。
BFC的区域不会与float box重叠。
BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此。
计算BFC的高度时，浮动元素也参与计算。

三、如何开启元素的BFC

设置元素的浮动（不推荐），即给父元素加个float属性值不为none。
将元素设置为行内块元素（不推荐），即设置display属性值为inline-block、table-cell、flex、table-caption或者inline-flex。
将元素的overflow的属性值设置为一个非visible的值（该方法为常用的方式）即为元素设置overflow:hidden开启BFC以使其可以包含浮动元素

四、元素开启BFC后的特点

开启BFC的元素不会被浮动的元素所覆盖。
测试如下：

<!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>
      .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        float:left;
      }
      .box2 {
        width: 100px;
        height: 100px;
        background-color:green;
      }
    </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>
</html>

未开启box2的BFC效果如下：
图片丢失

      .box2 {
        width: 100px;
        height: 100px;
        background-color:green;
        overflow: hidden;
      }

开启box2的BFC效果如下：
图片丢失
2. 开启BFC的元素子元素和父元素外边距不会重叠。
测试如下：

<!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>
      .box1 {
        width: 200px;
        height: 200px;
        background-color: red;
        margin-bottom: 100px;
      }
      .box2 {
        width: 100px;
        height: 100px;
        background-color:green;
        margin:100px;
      }
    </style>
</head>
<body>
  <div class="box1">
    <div class="box2"></div>
  </div>
</body>
</html>

未开启box1的BFC效果如下：
图片丢失

      .box1 {
        width: 200px;
        height: 200px;
        background-color: red;
        overflow: hidden;
      }

开启box1的BFC效果如下：
图片丢失
3. 开启BFC的元素可以包含浮动的子元素。
测试如下：

<!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>
      .box1 {
        border: 10px solid red;
      }
      .box2 {
        width: 100px;
        height: 100px;
        background-color:green;
        float: left;
      }
    </style>
</head>
<body>
  <div class="box1">
    <div class="box2"></div>
  </div>
</body>
</html>

未开启box1的BFC效果如下：
图片丢失

      .box1 {
        border: 10px solid red;
        overflow: hidden;
      }

开启box1的BFC效果如下：
图片丢失