什么是BFC？

最新推荐文章于 2024-05-20 22:08:52 发布

Code6E

最新推荐文章于 2024-05-20 22:08:52 发布

阅读量835

点赞数 12

分类专栏：面试题 CSS 文章标签： css css3

本文链接：https://blog.csdn.net/qq_59200309/article/details/137208615

版权

CSS 同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

面试题

4 篇文章 0 订阅

订阅专栏

BFC是 Block Formatting Context （块级格式上下文）的简写。是用于决定块盒子的布局及浮动相互影响范围的一个区域。在默认的情况下BFC是关闭的；当元素满足某些条件时会开启BFC。

开启了BFC能解决什么问题?

元素开启 BFC 后，其子元素不会再产生 margin 塌陷问题。
元素开启 BFC 后，自己不会被其他浮动元素所覆盖。
元素开启 BFC 后，就算其子元素浮动，元素自身高度也不会塌陷。

如何开启BFC？

根元素：html默认是开启BFC的
浮动元素：副作用是脱离文档流，进入浮动流
绝对定位、固定定位的元素：副作用是脱离文档流，进入定位流
行内块元素：副作用是块间会有margin
表格单元格： table 、 thead 、 tbody 、 tfoot 、 th 、 td 、 tr 、 caption
overflow 的值不为 visible 的块元素
变成弹性元素，其父容器应设置为display:flex
display值为inline-block 、 table-cell 、 table-caption 、 table 、 inline-table 、flex 、 inline-flex 、 grid 、 inline-grid
多列容器
column-span 为 all 的元素（即使该元素没有包裹在多列容器中）
display:flow-root，该元素生成一个块级元素盒，其会建立一个新的块级格式化上下文，定义格式化上下文的根元素。新增的属性，不兼容IE，副作用较小

元素开启 BFC 后，其子元素不会再产生 margin 塌陷问题。
示例
未开启BFC时，如下代码出现了如下的margin塌陷问题

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01_BFC_演示1</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .outer {
            width: 400px;
            background-color: #888;
        }
        .inner {
            width: 100px;
            height: 100px;
            margin: 20px;
        }
        .inner1 {
            background-color: orange;
        }
        .inner2 {
            background-color: green;
        }
        .inner3 {
            background-color: deepskyblue;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner inner1"></div>
        <div class="inner inner2"></div>
        <div class="inner inner3"></div>
    </div>
    <div style="height: 100px;width: 100px;background-color: aquamarine;"></div>
</body>
</html>

在这里插入图片描述
如下代码注释部分可解决margin塌陷问题

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01_BFC_演示1</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            /* display: flex; */
        }
        .outer {
            width: 400px;
            background-color: #888;
            /* float: left; */
            /* position: absolute; */
            /* display: inline-block; */
            /* display: table; */
            /* overflow: auto; */
            /* column-count: 1; */
            /* display: flow-root; */
        }
        .inner {
            width: 100px;
            height: 100px;
            margin: 20px;
        }
        .inner1 {
            background-color: orange;
        }
        .inner2 {
            background-color: green;
        }
        .inner3 {
            background-color: deepskyblue;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner inner1"></div>
        <div class="inner inner2"></div>
        <div class="inner inner3"></div>
    </div>
</body>
</html>

在这里插入图片描述

元素开启 BFC 后，自己不会被其他浮动元素所覆盖。
如下代码会出现绿盒子被浮动的橙盒子遮盖的情况

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02_BFC_演示2</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
        }
        .box1 {
            background-color: orange;
            float: left;
        }
        .box2 {
            background-color: green;
            /* float: left; */
            /* position: absolute; */
            /* display: inline-block; */
            /* display: table; */
            /* overflow: auto; */
            /* column-count: 1; */
            /* display: flow-root; */
        }
    </style>
</head>
<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
</body>
</html>

遮盖情况如下
在这里插入图片描述
通过注释部分的方法可解决浮动遮盖问题

3. 元素开启 BFC 后，就算其子元素浮动，元素自身高度也不会塌陷。
如下代码会出现父盒子高度塌陷的情况

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03_BFC_演示3</title>
    <style>
        .outer {
            width: 400px;
            background-color: #888;
            /* float: left; */
            /* position: absolute; */
            /* display: inline-block; */
            /* display: table; */
            /* overflow: auto; */
            /* column-count: 1; */
            /* display: flow-root; */
        }
        .inner {
            width: 100px;
            height: 100px;
            float: left;
        }
        .inner1 {
            background-color: orange;
        }
        .inner2 {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner inner1"></div>
        <div class="inner inner2"></div>
    </div>
</body>
</html>