一、float塌陷

1.介紹

浮動簡介
CSS浮動是指浮動元素會脫離“文件流並向左或右浮動，
允許文字和行內元素環繞它，直到碰到父元素或者另一個浮動元素。

我們都知道在一個div模型中設定一個巢狀時，當父元素未指定高度，它的高度將由子元素“撐開”。
當父元素沒設定足夠大小的時候，而子元素設定了浮動的屬性，子元素就會跳出父元素的邊界（脫離文件流），尤其是當父元素的高度為auto時，而父元素中又沒有其它非浮動的可見元素時，父盒子的高度就會直接塌陷為零， 我們稱這是CSS高度塌陷。
下面給出示例程式碼：

<div class="d1">父盒子
	<div class="d2">子盒子</div>
</div>
 

<style>
        .d1{
            background-color: chartreuse;
            width: 700px;
            height: auto;
        }
        .d2{
            background-color: darkmagenta;
            width: 300px;
            height: 200px;
        }
</style>

給子元素新增float:left;後：

      .d2{
            background-color: darkmagenta;
            width: 300px;
            height: 200px;
            float: left;
        }
 

出現高度塌陷：

2.解決方法

2.1 給父盒子設定高度

簡單直接，一個height:*px搞定。缺點是高度寫死，視窗無法自適應。

2.2 父盒子浮動

2.3 觸發BFC清除浮動(父盒子新增overflow屬性)

• overflow:auto; 有可能出現滾動條，影響美觀。
• overflow:hidden; 可能會帶來內容不可見的問題。

2.4 清除浮動

   <div class="d1">父盒子
        <div class="d2">子盒子</div>
        <br style="clear: both;">  <!--清除浮動塊-->
    </div>
 

• 缺點：引入了不必要的冗餘元素 。

2.5 用after偽元素清除浮動(推薦)

偽元素after的作用是在元素之後新增一個子元素，但是這個元素並不會存在於DOM中，因此被稱為偽元素。其實偽元素法和額外標籤法的原理一樣，都是通過在浮動元素父級的末尾新增一個空的元素來撐開父級元素的高度，使得浮動元素依然能包裹在父級盒子中，達到清除浮動的效果，只不過區別在於額外標籤法新增的是一個真實的元素，而偽元素法新增的是偽元素。定義clearfix類的after偽元素如下：

   .content:after{content: "";  <!--content指你寫的父元素-->
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }