li浮动时ul高度为0，解决ul自适应高度的几种方法

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

ul {     list-style-type: none;     height: 30px; /*添加高度属性*/ }

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

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

<ul> <li>标签1</li> <li>标签2</li> <li>标签3</li> <div style="clear:both;"></div> <!--新添加的空div，它和浮动元素同一级别，且位于最后--> </ul>

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

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

ul {     list-style:none;     zoom:1; /* 适用于IE */ }

<ul class="sys_spec_img">                 <c:if test="${not empty logStatus }">                     <c:forEach items="${logStatus }" var="item" varStatus="vs">                                                          <li <c:choose>                                 <c:when test="${item.status==1 }"></c:when>                                 <c:otherwise>style="background-color:red"</c:otherwise>                                 </c:choose> >                                 <p>${item.device.directionId } 区  ${item.location.locationName }</p>                                 <p>${item.device.deviceName }</p>                                 <p>${item.deviceIp }</p>                                 <c:choose>                                 <c:when test="${item.status==1 }">  正常</c:when>                                 <c:otherwise>网络异常</c:otherwise>                                 </c:choose>                                 <i></i>                             </li>                     </c:forEach>                 </c:if>                 <div style="clear:both;"></div>                 </ul>