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="##">    </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         }

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

我来评几句
登录后评论

已发表评论数()