关于css:什么是BFC

块格式化上下文（Block Formatting Context）是一个独立的渲染区域，简略来说就是一个独立的盒子，并且这个盒子里的布局不受内部影响，也不会影响到内部元素。
BFC 规定

BFC 外部的盒子 Box 会在垂直方向，一个接一个地搁置。
Box 垂直方向的间隔由 margin 决定。属于同一个 BFC 的两个相邻 Box 的垂直 margin 会产生重叠。
每个元素的 margin box 的右边，与蕴含块 border box 的右边相接触(对于从左往右的格式化，否则相同)。即便存在浮动也是如此。
BFC 的区域不会与浮动盒子 float box 重叠。
BFC 就是页面上的一个隔离的独立容器，容器外面的子元素不会影响到里面的元素。反之也如此。
计算 BFC 的高度时，浮动元素也参加计算。

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

1. 利用 BFC 防止 margin 重叠。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> 避免 margin 重叠 </title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    p {
        color: #f55;
        background: yellow;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 30px;
    }
</style>
<body>
    <p> 看看我的 margin 是多少 </p>
    <p> 看看我的 margin 是多少 </p>
</body>
</html>

页面生成的成果就是这样的：

依据第二条，属于同一个 BFC 的两个相邻的 Box 会产生 margin 重叠，所以咱们能够设置，两个不同的 BFC，也就是咱们能够让把第二个 p 用 div 包起来，而后激活它使其成为一个 BFC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> 避免 margin 重叠 </title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    p {
        color: #f55;
        background: yellow;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 30px;
    }
    div{overflow: hidden;}
</style>
<body>
    <p> 看看我的 margin 是多少 </p>
    <div>
        <p> 看看我的 margin 是多少 </p>
    </div>
</body>
</html>

2. 自适应两栏布局
每个盒子的 margin box 的右边，与蕴含块 border box 的右边相接触 (对于从左往右的格式化，否则相同)。即便存在浮动也是如此
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        width: 100%;
        position: relative;
    }
 
    .left {
        width: 100px;
        height: 150px;
        float: left;
        background: rgb(139, 214, 78);
        text-align: center;
        line-height: 150px;
        font-size: 20px;
    }
 
    .right {
        height: 300px;
        background: rgb(170, 54, 236);
        text-align: center;
        line-height: 300px;
        font-size: 40px;
    }
</style>
<body>
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
</body>
</html>

页面生成的成果就是这样的：

BFC 的区域不会与 float box 重叠。

所以咱们让 right 独自成为一个 BFC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        width: 100%;
        position: relative;
    }
 
    .left {
        width: 100px;
        height: 150px;
        float: left;
        background: rgb(139, 214, 78);
        text-align: center;
        line-height: 150px;
        font-size: 20px;
    }
 
    .right {
        overflow: hidden;
        height: 300px;
        background: rgb(170, 54, 236);
        text-align: center;
        line-height: 300px;
        font-size: 40px;
    }
</style>
<body>
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
</body>
</html>

页面生成的成果就是这样的：

right 会主动的适应宽度，这时候就造成了一个两栏自适应的布局。

3. 分明浮动。

当咱们不给父节点设置高度，子节点设置浮动的时候，会产生高度塌陷，这个时候咱们就要分明浮动。

比方这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> 革除浮动 </title>
</head>
<style>
    .par {
        border: 5px solid pink;
        width: 300px;
    }
    
    .child {
        border: 5px solid lightgoldenrodyellow;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>

页面生成的成果就是这样的：

这个时候咱们依据最初一条：计算 BFC 的高度时，浮动元素也参加计算。

给父节点激活 BFC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> 革除浮动 </title>
</head>
<style>
    .par {
        border: 5px solid pink;
        width: 300px;
        overflow: hidden;
    }
    
    .child {
        border: 5px solid lightgoldenrodyellow;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>

页面生成的成果就是这样的：

BFC 就是页面上的一个隔离的独立容器，容器外面的子元素不会影响到里面的元素，同样的，里面的元素也不会影响到容器外面的子元素。

关于css:什么是BFC

BFC 的规定？

如何创立 BFC

BFC 的作用

总结