BFC（Block Format Context——块级格式化上下文）

wowqm

已于 2024-08-21 16:35:46 修改

阅读量395

点赞数 3

文章标签： css

于 2024-08-21 16:29:42 首次发布

本文链接：https://blog.csdn.net/xlbyx/article/details/141395308

版权

理解

BFC相当于一个容器，开启BFC后，容器内部元素的布局和渲染遵循特定的规则，与外部的元素相互独立。这意味着 BFC 内部的元素不会与外部的元素产生布局冲突，并且可以独立地进行样式计算和渲染。

HTML本身就是BFC

开启BFC可以解决的问题

父元素开启BFC，其子元素不会产生margin塌陷问题（父元素不会和其子元素产生margin合并）
父元素开启BFC，子元素浮动时，父元素自身高度不会坍塌（高度计算不在无视浮动元素）
开启BFC，自己不会被浮动元素所覆盖

开启BFC

浮动元素（float）：将一个元素设置为浮动元素
绝对定位元素：将一个元素设置为绝对定位（position: absolute/fixed）
具有overflow属性的块级元素：将一个块级元素（例如div、p等）设置为具有overflow属性（属性值不能为visible）
具有display属性为inline-block、table、flex、grid或flow-root的元素
多列容器（设置column-count）

案例

margin塌陷

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      *{
          margin: 0;
          padding: 0;
      }
    .outer{
        width: 200px;
        background: skyblue;
        /* 开启BFC */

        /* float: left; */

        /* position: absolute; */

        /* overflow: hidden; */

        /* display: flow-root; */
    }
    .inter{
        width: 50px;
        height: 50px;
        margin: 20px;
    }

    .one{
        background: red;
    }
    .two{
        background: green;
    }
    .three{
        background: blue;
    }
  </style>
</head>
<body>

<div class="outer">
    <div class="inter one"></div>
    <div class="inter two"></div>
    <div class="inter three"></div>
</div>

</body>
</html>

margin塌陷解决margin塌陷后解决margin塌陷

父元素高度坍塌

子元素浮动脱离标准流后，父元素没有设置固定高度，其高度会为0

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      *{
          margin: 0;
          padding: 0;
      }
    .outer{
        width: 300px;
        background: skyblue;
        /* 开启BFC */

        /* float: left; */

        /* position: absolute; */

        /* overflow: hidden; */

        /* display: flow-root; */
    }
    .inter{
        width: 50px;
        height: 50px;
        float: left;
    }

    .one{
        background: red;
    }
    .two{
        background: green;
    }
    .three{
        background: blue;
    }
  </style>
</head>
<body>

<div class="outer">
    <div class="inter one"></div>
    <div class="inter two"></div>
    <div class="inter three"></div>
</div>

</body>

<script src="./1.js"></script>
</html>

父元素高度坍塌解决父元素高度坍塌