您的位置：首页 > 其它

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

2015-12-20 18:22 411 查看

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

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

原文地址：http://www.cnblogs.com/junjieok/p/4513363.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航