li浮动引起ul高度坍陷的解决方法

　　我们都知道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="##">首&nbsp&nbsp&nbsp&nbsp页</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         }

　   以上任意一种方法，都可以解决此问题。

posted @ 2015-05-18 23:33  junjieok  阅读(3802)  评论(0)  编辑  收藏  举报