【学习总结】理解浮动导致的高度塌陷和解决的原理1. 实例 2. 形成原因子元素形成了bfc， bfc全称 block-

在用浮动实现三列布局的时候发现触发了父元素的高度塌陷，于是研究了下浮动导致的高度塌陷的原理及解决方案的根据

浮动导致的高度塌陷

1. 实例

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .all{
            padding: 0 200px 0 300px;
            background-color: aqua;

        }
        .all:after{
            display: block;
            content: '';
            height: 0;
            clear: both;
        }
        .other{
            width: 100%;
            height: 200px;
            background-color: tomato;
        }
        main, .left ,.right{
            float: left;
            height: 100px;
        }
        main{
            background-color: bisque;
            width: 100%;
        }
        .left {
            background-color: blueviolet;
            width: 300px;
            left: -300px;
            margin-left: -100%;
            position: relative;
        }
        .right {
            position: relative;
            background-color:thistle;
            width: 200px;
            margin-left: -200px;
            left: 200px;

        }
    </style>
</head>
<body>
    <div class="all">
      
        <main> this is a main block</main>
        <aside class="left">this is an aside left block</aside>
        <aside class="right"> this is an aside right block</aside>
        
    </div>
    <div class="other">
     
    
    </div>
</body>

实现效果

在页面中all是没有高度的，这是父元素高度塌陷的现象
2. 形成原因

子元素形成了bfc， bfc全称 block-formatting-content ，是display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context。
bfc的创建条件有四条:
1. float的值不是none。
2. position的值不是static或者relative。
3. display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4. overflow的值不是visible
由这四条可见子元素形成了bfc，但是BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之如此。所以子元素的高度父元素计算不到
因为子元素都是float，float的特性是部分脱离于文档流（其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围(可以说是部分无视)），所以子元素高度计算不到，导致父元素高度为0。

3. 解决方案

最常用的解决方案是给父元素加after，在after里面加clear：both

  .all:after{
            display: block;
            content: '';
            height: 0;
            clear: both;
        }

实现效果

可以看到这时候all元素已经有了高度，高度塌陷已经解决

解决原因：
通过伪元素去让all触发bfc ，在计算BFC的高度时，浮动元素也参与计算，所以这一次all就可以计算出实际高度

参考资料：
www.cnblogs.com/feichengwul…
blog.csdn.net/sinat_36422…
www.cnblogs.com/pssp/p/5367…