BFC的应用场景

codereasy

于 2023-06-07 18:44:37 发布

阅读量138

点赞数

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.csdn.net/wtswts1232/article/details/131093532

版权

前端专栏收录该内容

44 篇文章 19 订阅

订阅专栏

BFC的定义

简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。

BFC的特性（规则）

BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列
BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
垂直方向的距离由margin决定，属于同一个BFC内部的两个相邻的标签外边距会发生重叠
计算BFC的高度时，浮动元素也参与计算

怎么触发BFC

body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

案例一：高度塌陷

问题代码

container高度塌陷，因为子元素脱离标准流。

<!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>高度塌陷</title>
    <style>
        .box {
            margin: 100px;
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
        .container {
            background: #000;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

修改后代码

根据BFC特性：计算BFC的高度时，浮动元素也参与计算。我们可知，只要触发container的BFC，那么container的高度就不会塌陷。

<!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>高度塌陷</title>
    <style>
        .box {
            margin: 100px;
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
        .container {
            background: #000;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

案例二：Margin边距重叠

问题代码

上box和下box之间的间距理论上是 20px，但是实际上只有10px。

<!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>
        .box {
            margin: 10px;
            width: 100px;
            height: 100px;
            background: #000;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

修改后代码

这里将第二个 box 包裹在 <p>里面。实际上只要把它包裹在任意一个BFC元素里面，都可以实现相同的效果。因为同一个BFC元素内相邻元素的 margin 会重叠。但是不同的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>Margin边距重叠</title>
    <style>
        .box {
            margin: 10px;
            width: 100px;
            height: 100px;
            background: #000;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <p><div class="box"></div></p>
    </div>
</body>
</html>

案例三：两栏布局

问题代码

如果左元素 float，那么左元素就会脱离标准流。因此左元素会覆盖住右元素一部分（相对于重叠了）。

<!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>两栏布局</title>
    <style>
      div {
        height: 100px;
        /* display: inline-block; */
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div style="float: left; width: 200px">
      两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局
    </div>
    <div style="width: 300px">我是右边的内容</div>
  </body>
</html>

修改后代码

由于右侧元素触发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>两栏布局</title>
    <style>
      div {
        height: 100px;
        /* display: inline-block; */
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div style="float: left; width: 200px">
      两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局
    </div>
    <div style="width: 300px; overflow: hidden">
    	我是右边的内容。
    </div>
  </body>
</html>

参考：
https://juejin.cn/post/6950082193632788493
https://zhuanlan.zhihu.com/p/25321647

codereasy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
BFC的应用场景

简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。
复制链接

扫一扫

专栏目录

BFC的应用场景

BFC的定义

BFC的特性（规则）

怎么触发BFC

案例一：高度塌陷

问题代码

修改后代码

案例二：Margin边距重叠

问题代码

修改后代码

案例三：两栏布局

问题代码

修改后代码

“相关推荐”对你有帮助么？