我們都知道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>View Code
下面我們就來看一下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 }以上任意一種方法，都可以解決此問題。