CSS中浮動塌陷的解決辦法及分析

CSS中浮動塌陷的解決辦法及分析

下面，首先通過一個小案例來了解浮動元素對父級元素帶來的影響（浮動塌陷）。

	<div class="div1">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>

	/*css代碼*/
	.div1{
   
   
            width: 300px;
            margin: 0 auto;
            border: 3px solid saddlebrown;
        }
        .box1{
   
   
            width: 100px;
            height: 100px;
            background-color: red;
            float:left;
        }
        .box2{
   
   
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;
        
        }
        .box3{
   
   
            width: 100px;
            height: 100px;
            background-color: blue;
            float: left;
        }

結果圖

現只給父級設置了寬度沒有給高度，呈現出父級只顯示邊框線，子元素沒有把父元素的高度撐起來，造成了浮動塌陷現象。
**分析：**由於浮動元素（三個div）脫離了文檔流，所以會導致不佔有父級元素的空間，會給父級元素帶來影響（浮動塌陷）。
解決辦法

1、設置父級高度和寬度：將上述案例的父級盒子給一個高度

.div1{
   
   
            width: 300px;
            height: 100px;
            margin: 0 auto;
            border: 3px solid saddlebrown;
        }

效果圖：

分析：這個辦法要知道父級的精確寬高，對於項目開發代碼比較的時候，並不能精確的知道父級的寬高，所以這個方法不適用。

2、父級浮動：給父元素的樣式設置浮動屬性

.div1{
   
   
            width: 300px;
            float: left;
            margin: 0 auto;
            border: 3px solid saddlebrown;
        }

效果圖：

分析：這樣做雖然可以不用知道父級的寬高，但大家可以看到，父級浮動後它之前的水平居中效果就沒有了，所以父級浮動的缺點是對後續的元素會有造成影響。

3、爲父級添加overflow屬性：在父級的樣式中加入overflow:hidden或者overf:auto

	.div1{
   
   
            width: 300px;
            overflow: hidden;
            margin: 0 auto;
            border: 3px solid saddlebrown;
        }

	.div1{
   
   
            width: 300px;
            overflow: auto;
            margin: 0 auto;
            border: 3px solid saddlebrown;
        }

在其中的一個子div中加入較多的文字後


分析：以上效果可以看出，使用hidden值時當內容超出時，超出的部分會被隱藏。使用auto值時，有超出的部分會出現滾動條，這樣就影響到了頁面的佈局。

4、在父元素中最後一個子元素的後面追加一個空元素，並給它一個clear:both;（清除浮動）

//HTML代碼
	<div class="div1">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>

//css代碼
	.box4{
   
   
            clear: both;
        }

結果如下

分析：這個方法需要多加一個空元素，但相較於以上幾種方法，是解決浮動塌陷最優的辦法。

喜歡的可以下方一鍵三連支持下哦！！！