day012_BFC的概念、触发条件及应用概念BFC的原理内部的boxd会在垂直方向，一个接一个的放置每个元素的marg

概念

BFC（Block Formatting Context ）就是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲，可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

BFC的原理

内部的boxd会在垂直方向，一个接一个的放置
每个元素的margin box的左边，与包含块border box的左边相接触（对于从左往右的格式化，否则相反）
box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠
bfc的区域不会与浮动区域的box重叠
bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的
计算bfc高度的时候，浮动元素也会参与计算

触发条件

只要元素满足下面任意一条件即可触发BFC特性：

body根元素

浮动元素：float除none以外的值

绝对定位元素：元素具有position（absolute、fixed）

display为inline-block、table-cells、flex

overflow 除了visiblew以外的值（hidden、auto、scroll）块元素具有**overflow** 且值不是visible的

应用场景

(1)防止垂直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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .top{
            width: 200px;
            height: 100px;
            background: red;
            margin-bottom: 30px;
        }
        .bottom{
            width: 200px;
            height: 100px;
            background: blue;
            margin-top: 50px;
        }
    </style>
</head>
<body>
        <div class = 'top'>上</div
        //这里实现了BFC清除margin重叠
        <div style="overflow:hidden">
            <div class="bottom">下</div>
        </div>
</body>
</html>

如果没有外面的div，上下两个div的中间间隔并不是80px；而是50px，出现了margin重叠的问题，如下图：

使用overflow:hidden解决重叠

此时高度差就为80px

(2)清除内部浮动

<!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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .div{
            width: 100px;
            height: 100px;
        }
        .top{
            width: 50px;
            height: 50px;
            background: red;
            float:left;
        }
        
    </style>
</head>
<body>
        <div class="div">
            <div class="top"></div>
            <div style="overflow:hidden">
                <div>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
            </div>
        </div>
</body>
</html>

overflow：hidden 前后对比图：

(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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .div{
            width: 100%;
            height: 100%;
        }
        .left{
            width: 50px;
            height: 100px;
            background: red;
            float:left;
            margin-right: 20px;
        }
        .right{
            height: 100px;
            background: blue;
            overflow: hidden;
        }
        
    </style>
</head>
<body>
        <div class="div">
            <div class="left">111111</div>
            <div class="right">2222222222</div>
        </div>
</body>
</html>

效果图：

总结

使用BFC并不是很好的解决方案，像一个外边距合并问题给人带来的困扰就非常大，完全可以使用更简单的方案如给父元素添加透明的border或padding来解决；像是两栏布局以及去除文字环绕效果，也可以通过margin-left来解决，使用overflow: hidden也会产生新的问题，如文字溢出无法显示；最后一个更是可以使用清除浮动（添加.clearfix）来解决父元素高度塌陷。

————————————————

部分借鉴csdn中原文链接：blog.csdn.net/q1312882392…