我们都知道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>