我們都知道float在CSS中的作用是使元素脫離正常的文檔流並使其移動到其父元素的“最左邊”或“最右邊”。元素浮動之后,它脫離當前正常的文檔流,所以無法撐開其父元素,造成父元素的高度塌陷。如下的代碼就是li向左浮動后,ul高度坍陷,所以border就顯示為一條線。代碼、效果如下:

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>li浮動引起ul高度坍陷的解決方法</title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding:0; 10 font-size: 14px; 11 list-style: none; 12 } 13 14 ul{ 15 margin: 100px auto; 16 width: 505px; 17 border: 1px solid #FC8403; 18 } 19 li{ 20 float: left; 21 } 22 a{ 23 text-decoration: none; 24 display: block; 25 height: 30px; 26 line-height: 30px; 27 background-color: #ccc; 28 width: 100px; 29 margin-right: 1px; 30 text-align: center; 31 32 } 33 a:hover{ 34 background-color: #f60; 35 color: #fff; 36 } 37 38 .clearfix { 39 *zoom: 1; 40 } 41 .clearfix:before, .clearfix:after { 42 display: table; 43 line-height: 0; 44 content: ""; 45 } 46 .clearfix:after { 47 clear: both; 48 } 49 </style> 50 </head> 51 <body> 52 <ul> 53 <li> 54 <a href="##">首    頁</a> 55 </li> 56 <li> 57 <a href="##">新聞資訊</a> 58 </li> 59 <li> 60 <a href="##">產品展示</a> 61 </li> 62 <li> 63 <a href="##">售后服務</a> 64 </li> 65 <li> 66 <a href="##">聯系我們</a> 67 </li> 68 </ul> 69 </body> 70 </html>
下面我們就來看一下float浮動因起此問題的幾種解決方法:
1、最直接簡單的方法就是給ul加一個高度。
1 ul{ 2 margin: 100px auto; 3 width: 505px; 4 border: 1px solid #FC8403; 5 6 height: 30px; /*添加高度,解決float浮動引起的高度坍陷*/ 7 }
2、在最后一個li后加上一個div,給div加上clear:both的樣式。
1 <li> 2 <a href="##">聯系我們</a> 3 </li> 4 <div style="clear:both;"></div><!--添加一個空div,用clear:both清除浮動造成的影響-->
3、給ul加上overflow: hidden;zoom:1;的樣式。
1 ul{ 2 margin: 100px auto; 3 width: 505px; 4 border: 1px solid #FC8403; 5 6 overflow: hidden;/*添加高度,解決float浮動引起的高度坍陷*/ 7 zoom:1; 8 }
4、給ul加class="clearfix"的樣式。
1 .clearfix { 2 *zoom: 1; 3 } 4 .clearfix:before, .clearfix:after { 5 display: table; 6 line-height: 0; 7 content: ""; 8 } 9 .clearfix:after { 10 clear: both; 11 }
以上任意一種方法,都可以解決此問題。