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

我们都知道float在CSS中的作用是使元素脱离正常文档流并使其移动到其父元素的“最左边”或者“最右边”。元素浮动之后，它脱离当前正常的文档流，所以无法撑开其父元素，造成父元素高度塌陷。

解决方法：
一、直接ul添加高度

ul{
    height: 40px;
}

二、ul添加样式zoom:1;(只对IE有效)

ul{
    zoom: 1;
}

三、ul添加样式overflow: hidden;zoom: 1;

ul{
    overflow: hidden;
    zoom: 1;
}

四、在最后一个li后加上一个div，div加上clear:both的样式

<li>第四名</li>
<div style="clear: both;"></div>

优快云 code地址：
https://code.youkuaiyun.com/snippets/1606528