子元素浮动后，父容器高度随子元素高度变化

一、问题的提出

main {
            width: 300px;
            border: solid 1px black;
            padding: 20px;
            margin: auto;
        }

        div:nth-child(1) {
             width: 100px;
             height: 100px;
             background-color: red;
             float: left;
        }
        div:nth-child(2) {
            width: 100px;
            height: 100px;
            background-color: blue;
            float: right;
        }
<main>
        <div></div>
        <div></div>
</main>

由于main容器中的2个div都浮动了，而main容器没有指定高度，只是靠着padding撑着，效果如下

二、问题解决

加入如下代码

.clearfix { // 加入这个样式
            clear: both;
        }
<main>
        <div></div>
        <div></div>
        <article class="clearfix"></article>      // 加入这一行
</main>

加入后效果图如下

三、原理解释

子元素都浮动后，父容器感知不到子元素的高度，于是撑不起来，但是在子元素后再增加一个块级元素后，如果清除它的浮动影响，那么它是可以感知到前面2个浮动的元素的高度的，而父容器又可以感知到加入的这个块元素的，于是存在传递性，父容器也感知到了那2个浮动的子元素的高度，不得不佩服发现此技巧的人，真的是孰能生巧。