我们都知道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 }
以上任意一种方法，都可以解决此问题。