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;
}
結果如下
分析：這個方法需要多加一個空元素，但相較于以上幾種方法，是解決浮動塌陷最優的辦法，
喜歡的可以下方一鍵三連支持下哦！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/234908.html
標籤：其他
上一篇：Angular學習之核心檔案分析