CSS之BFC

CSPsy

已于 2022-03-14 15:38:55 修改

阅读量812

点赞数 2

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

于 2022-02-06 23:59:23 首次发布

本文链接：https://blog.csdn.net/m0_51573433/article/details/122802996

版权

CSS 专栏收录该内容

11 篇文章 8 订阅

订阅专栏

CSS-BFC块级格式化上下文

1. 什么是 BFC ？
2. BFC 的形成条件
3. BFC 的应用

1. 什么是 BFC ？

BFC (Block Formatting Contexts块级格式化上下文)
它是页面中的一块渲染区域，并且有着自己的一套渲染规则
具有 BFC 特性的元素可以看作是隔离了的独立容器

2. BFC 的形成条件

满足以下任意一个条件，即可触发 BFC

float 的值不是none
position 的值不是static或者native
display 的值是inline-block、table-cell、flex、table-caption或着inline-flex
overflow 的值不是visible

3. BFC 的应用

在书写盒模型的margin时，我们可能会遇到传递问题和叠加问题；
除此之外，我们可能还会遇到因为子元素浮动而使父容器高度塌陷的问题。
遇到这些问题时我们都可以通过使用 BFC 来解决

3.1) 解决margin传递问题

比如以下情况：
box2 的margin-top传递到了 box1 那，即 box2 影响到了外面的元素 box1

<!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>BFC</title>
    <style>
    	* {
            margin: 0;
        }
        
        .box1 {
            width: 300px;
            height: 300px;
            background: skyblue;
        }

        .box2 {
            width: 130px;
            height: 130px;
            background: lightgreen;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

在这里插入图片描述

这时候，我们可以采用 BFC 来解决这个问题，因为利用 BFC，使 box1 成为一个独立的容器，无论里面的子元素如何变化，都不影响到外面的元素

.box1 {
	width: 300px;
	height: 300px;
    background: skyblue;
    overflow: hidden;  /* 触发了 BFC 规则，形成了独立容器 */
}

在这里插入图片描述

3.2) 解决margin叠加问题

比如以下情况：
box1 和 box2 在垂直方向上会发生塌陷问题，在垂直方向上，它们之间的margin会取两者之间最大的那一个的值

<!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>BFC</title>
    <style>
        * {
            margin: 0;
        }

        .box1 {
            width: 300px;
            height: 300px;
            background: skyblue;
            margin-bottom: 40px;
        }

        .box2 {
            width: 130px;
            height: 130px;
            background: lightgreen;
            margin-top: 50px;
        }
    </style>
</head>
<body>
       <div class="box1"></div>
       <div class="box2"></div>
</body>
</html>

在这里插入图片描述

我们可以使 box1 和 box2 成为一个名为 box 类的 div 的子元素，然后使这个盒子具有 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>BFC</title>
    <style>
        * {
            margin: 0;
        }

        .box {
            overflow: hidden;    /* 触发了 BFC 规则，形成了独立容器 */
        }

        .box1 {
            width: 300px;
            height: 300px;
            background: skyblue;
            margin-bottom: 40px;
        }

        .box2 {
            width: 130px;
            height: 130px;
            background: lightgreen;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
    </div>
    <div class="box">
        <div class="box2"></div>
    </div>
</body>
</html>

在这里插入图片描述

3.3) 解决浮动高度塌陷

比如以下情况：
一开始，box1 作为父容器没有高度，它的高度由子元素 box2 的高度撑起来的

<!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>BFC</title>
    <style>
        * {
            margin: 0;
        }

        .box1 {
            width: 300px;
            border: 1px black solid;
        }

        .box2 {
            width: 120px;
            height: 120px;
            background: lightgreen;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

在这里插入图片描述

这时，如果我们把 box2 设置为浮动，那么它将脱离文档流，对 box1 这个父容器的高度造成影响，出现下面情况。

 .box2 {
	width: 120px;
    height: 120px;
    background: lightgreen;
    float: left;
 }

在这里插入图片描述
这个时候，遇到这种因为浮动，父容器高度塌陷的问题，我们可以对父容器使用 BFC ，使其成为一个独立的容器（抽象的理解：将子元素困于其中，所以子元素就算设置为了浮动，它的高度也会被计算进父容器的高度里面去）

.box1 {
	width: 300px;
    border: 1px black solid;
    overflow: hidden;      /* 触发了 BFC 规则，形成了独立容器 */
}

在这里插入图片描述

CSPsy

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS之BFC

CSS之BFC什么是 BFCBFC 的形成条件BFC 的应用解决浮动父容器高度塌陷解决 margin 垂直方向上塌陷解决margin 传递问题和叠加问题
复制链接

扫一扫

专栏目录