前言

BFC （Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

BFC盒子的特点：

排除外部浮动。解释：默认情况下，常规流的元素布局的时候会忽略浮动元素，好像浮动元素不存在一样。但是：满足BFC的块盒子不会和浮动的兄弟元素重叠，浮动的兄弟元素不会盖在它身上。
包含内部浮动。解释： 默认情况下，块元素盒子的高度由内容撑开，计算高度的时候只会包含常规流。不会包含内部的浮动元素。但是，如果盒子开启BFC,那么块盒子计算高度的时候，就需要考虑内部的浮动元素。
阻止margin重叠。 解释： 默认情况下，块元素中的第一个子元素的margin-top和最后一个子元素的margin-bottom会被挪动到自身。但是开启BFC以后，不会再有该现象，子元素的margin就是子元素的margin。

开启BFC的方式：

参考 developer.mozilla.org/zh-CN/docs/…

文档的根元素.（html）
浮动元素.（float 不为none）
绝对定位元素和固定定位的元素。position为absolute或者fixed的元素.
行内块元素. display为 inline-block 的元素。
表格的单元格和表格的标题元素。（display为table-cell和table-caption）
overflow不为默认值visible 的元素（auto,hidden,scroll）
display为flow-root。
display为flex或者inline-flex的直接子元素。
多列容器（column-count的值不为auto,且含有column-count:1的元素）
column-span的值为all 的元素。（不常用）

举例测试BFC 的三种效果

1. 排除外部浮动。 利用该规则实现左侧固定200px，右侧自适应布局。

style:

.floatDiv{  
    width: 200px;  
    height: 1000px;  
    float: left;  
    background-color: skyblue;  
}  
.normal{  
    width: calc(100% - 200px);  
    height: 1000px;  
    background-color: orangered;  
    overflow: hidden;  
}

html

<body>  
    <div class="container">  
        <div class="floatDiv">float</div>  
        <div class="normal">normal</div>  
    </div>  
</body>

效果：

3. 包含内部浮动。 利用该问题解决父元素高度塌陷的问题。

默认情况高度塌陷：

.container{  
    background-color: darkorange;  
}  
  
.floatDiv{  
    width: 200px;  
    height: 200px;  
    float: left;  
    background-color: skyblue;  
}

htm

<body>  
<div class="container">  
    <div class="floatDiv">float</div>  
</div>  
</body>

效果：

给container 加上BFC:

.container{
    display: flow-root;
}

高度塌陷解决：

阻止margin重叠(margin-塌陷)。

默认情况，块盒子的第一个子元素的margin-top 和最后一个子元素的margin-bottom 会转移到自己身上。

<!DOCTYPE html>  
<html lang="zn-CH">  
<head>  
    <meta charset="UTF-8">  
    <title>Rock学前端</title>  
<style>  
    .container{  
        background-color: darkorange;  
    }  
    .inner{  
        width: 200px;  
        height: 200px;  
        background-color: skyblue;  
        margin: 10px;  
    }  
</style>  
</head>  
<body>  
<div class="container">  
    <div class="inner">inner1</div>  
    <div class="inner">inner2</div>  
</div>  
</body>  
</html>

子元素的maigin跑到父元素了，重叠了：

此时对父元素开启BFC，margin-重叠消失：

BFC 的三个特点

前言

BFC盒子的特点：

开启BFC的方式：

举例测试BFC 的三种效果