什么是BFC - 掘金

什么是BFC（Block Formatting Context ）

BFC（Block formatting context ）“块级格式上下文”。是用于布局块级盒子的一块渲染区域。并且与这个区域的外部毫无关系。可以理解为BFC是一个块独立的作用域，它有些自己的特性。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

如何产生BFC

满足下列条件之一就可以触发BFC

1.float 的值不是 none
2.position 的值不是static或者relative
3.display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4.overflow 的值不是 visible

BFC的作用

1.解决margin塌陷问题 属于同一个BFC的两个相邻的box的margin会重叠，以大的为主。要想解决这个问题，可以将两个盒子分为不同的BFC中。在同一个BFC中：

在这里插入图片描述

成为两个BFC，给其中一个盒子外面再包裹一层，并加上 overflow: hidden;

在这里插入图片描述

 <style>
        .red {
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 20px;
        }
        .box {
            overflow: hidden;
        }
        .yellow {
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="box">
        <div class="yellow"></div>
    </div>
</body>

2.解决父元素高度塌陷问题

当子元素设置为浮动，父元素没有设置高度时，父元素无法撑开子元素的高度在这里插入图片描述

给父元素设置 overflow: hidden;，触发BFC，就可以撑开高度

在这里插入图片描述

<style>
        .box1 {
            width: 200px;
            border: 2px solid #ccc;
            overflow: hidden;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

3.解决相邻div遮盖问题（可用作两栏布局） 两个相邻的div，其中一个浮动，另一个就会被覆盖

在这里插入图片描述

给被覆盖的元素加上 overflow: hidden;，触发BFC，就可以防止被红色盒子遮挡

在这里插入图片描述

 <style>
        .box1 {
            height: 100px;
            width: 100px;
            float: left;
            background: red
        }
        .box2 {
            width: 200px;
            height: 200px;
            background: #eee;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="box1">我是一个左浮动的元素</div>
    <div class="box2">我是一个没有设置浮动,也没有触发 BFC 的元素</div>
</body>