clear:both可以清除浮動的原理（給子元素設置clear:both相當於給它自動設置了1個mrgin-top外邊距從而可以撐開父盒子高度）

父盒子沒有設置高度，裏面的子盒子box1由於浮動導致脫離父盒子從而無法再撐開父盒子的高度，父盒子高度因此塌陷，最終導致父盒子上下邊框貼在一起。

<style>
.fabox {
        border: 10px solid red;
        margin-top: 20px;
    }

    .sonbox1 {
        width: 200px;
        height: 200px;
        background-color: pink;
        float: left;
    }

    .sonbox2 {
        background-color: green;
    }
</style>

 <div class="fabox">
        <div class="sonbox1"></div>
        <div class="sonbox2"></div>
</div>

效果圖如下：

此時如果在父盒子內部再加上一個盒子box2，只要給這個box2盒子clear:both屬性，父盒子會被撐開，撐開原理可以理解爲因爲box2給了clear:both屬性後相當於自動加了一個box2到父盒子的外邊距（黃色箭頭所示）

<style>
.fabox {
        border: 10px solid red;
        margin-top: 20px;
    }

    .sonbox1 {
        width: 200px;
        height: 200px;
        background-color: pink;
        float: left;
    }

    .sonbox2 {
        clear: both;
        background-color: green;
    }
</style>

    <div class="fabox">
        <div class="sonbox1"></div>
        <div class="sonbox2">Aaaaaa</div>
    </div>

 

這個時候的

 .sonbox2 {

        clear: both;

        background-color: green;

    }

實際上和

 .sonbox2 {

        margin-top: 200px;

        background-color: green;

    }

效果差不多，只不過margin-top需要給固定高度不利於內容顯示，而clear：both是自動給高度。

注意上面爲了演示所以給box2加上了內容Aaaa，實際運行去掉內容，頁面就不會顯示box2了。
但此時的box2實際上作用僅僅只是爲了清除父盒子的浮動影響，副作用就是多出1個div結構，不利於後期維護，此時我們可以採用僞元素裏實現這個目標，在css裏添加如下代碼：

 .fabox::after {
        content: '';
        display: block;

        /* 加上clear: both後相當於給這個div加了1個可自適應高度的margin-top外邊距 */

        clear: both;
    }

效果圖：

可以看到在父盒子後面添加僞元素後，父盒子高度已經被撐開了。

在父盒子後面添加僞元素後實際相當於在父盒子裏新增了1個類似box2的盒子，所以效果和在box2設置vlear:both一樣，但用僞元素不會在頁面顯示新增的元素。

我們給這個僞元素添加內容就能對比出效果了

  .fabox::after {
        content: '我是父盒子元素後面新增的僞元素，背景顏色綠色，效果和box2一樣';
        display: block;
        clear: both;
        background-color: green;
    }