CSS实战笔记(九) BFC

news/2024/5/19 2:19:48 标签: CSS, BFC

1、基本介绍

BFC（Block Formatting Context）的中文名称是块级格式化上下文，它是一个独立渲染的区域

在这个区域的内部有自己的布局规则，内部的元素对外部的元素没有任何影响，反之亦然

2、布局规则

BFC 的内部元素都必须是块级盒子，并且这些盒子有一定的布局规则，具体如下：

盒子在垂直方向上一个接着一个放置
相邻盒子在垂直方向上的距离由 margin 决定，属于同一个 BFC 的两个相邻盒子会发生 margin 重叠的情况
每个盒子的左外边距与容器的左边界相接触，即使它是浮动盒子也是如此
BFC 的区域不会与浮动盒子重叠
BFC 的高度计算要包含浮动盒子

3、创建方式

创建一个 BFC 的方法有很多，下面来介绍比较常用的几种：

根元素本来就是一个 BFC
设置 float 属性的值不为 none
设置 overflow 属性的值不为 visible
设置 position 属性的值为 absolute 或 fixed
设置 display 属性的值为 flow-root、inline-box、flex 等

4、应用实例

（1）解决高度塌陷的问题

如果我们没有显式设置父元素的高度，并将子元素设置为浮动的，那么父元素就会出现高度塌陷

<!DOCTYPE html>
<html>
<head>
    <style>
        .father {
            border: 1px solid red;
            width: 300px;
        }
        .son {
            border: 1px solid blue;
            width: 100px;
            height: 80px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

在这里插入图片描述

清除浮动，意思就是清除由于子元素浮动导致父元素高度塌陷的影响，清除浮动有两个基本的思路

在父元素的最后加一个冗余元素，并给这个元素设置 clear:both

.father {
    border: 1px solid red;
    width: 300px;
}
.father::after { /* 关键 */
    content: '';
    display: table;
    clear: both;
}
.son {
    border: 1px solid blue;
    width: 100px;
    height: 80px;
    float: left;
}

将父元素设置为 BFC，因为 BFC 的高度计算要包含浮动元素

.father {
    border: 1px solid red;
    width: 300px;
    display: flow-root; /* 关键 */
}
.son {
    border: 1px solid blue;
    width: 100px;
    height: 80px;
    float: left;
}

在这里插入图片描述

（2）解决外边距塌陷的问题

属于同一个 BFC 的两个相邻盒子会发生外边距塌陷的情况

<!DOCTYPE html>
<html>
<head>
    <style>
        .elder-brother {
            width: 100px;
            height: 80px;
            border: 1px solid red;
            margin-bottom: 10px;
        }
        .little-brother {
            width: 100px;
            height: 80px;
            border: 1px solid blue;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="elder-brother"></div>
    <div class="little-brother"></div>
</body>
</html>

在这里插入图片描述

解决方法就是给其中一个元素包一个 BFC，这样就能使得两个元素不在同一个 BFC 中

<!DOCTYPE html>
<html>
<head>
    <style>
        .elder-brother {
            width: 100px;
            height: 80px;
            border: 1px solid red;
            margin-bottom: 10px;
        }
        .wrapper {  /* 关键 */
            display: flow-root;
        }
        .little-brother {
            width: 100px;
            height: 80px;
            border: 1px solid blue;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="elder-brother"></div>
    <div class="wrapper"><div class="little-brother"></div></div>
</body>
</html>