css中ul标签高度超过li标签,li浮动时ul高度为0，解决ul自适应高度的几种方法

在网页设计中，常常需要对li标签做浮动效果，但是在不同浏览器中会遇到兼容性问题，比如IE中会出现ul高度为0的情况，是效果不能达

到预期效果。那么这里我就来讲解一下解决这个问题的几种方法。

1.给ul元素设置高度height

最直接的办法是给ul元素设置一个高度，即ul标签添加height属性，代码如下:

ul {

list-style-type: none;

height: 30px; /*添加高度属性*/

}

次方法有个缺点：就是元素的高度不能自适应内容。

2.添加一个空的div

添加一个空的div，这个div和浮动元素同一级别，且位于浮动元素的最后。这个方法必须要为这个div添加一个clear:both属性，代码如下：

• 标签1
• 标签2
• 标签3

3.添加zoom属性，适用于IE

IE支持一个CSS属性zoom，当定义了这个属性之后在 IE 浏览器里面就会自动适应高度了。设置为zoom:1，代码如下：

ul {

list-style:none;

zoom:1; /* 适用于IE */

}

通过这几种方法基本可以解决元素的高度不能自适应内容。