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

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 2 联系我们 3
4
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 }
以上任意一种方法,都可以解决此问题。

相关推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注

微信扫一扫,分享到朋友圈

li浮动引起ul高度坍陷的解决方法
返回顶部

显示

忘记密码?

显示

显示

获取验证码

Close