ul高度显示为0的问题

当一个元素只包含浮动元素的时候，它会出现高度折叠，即元素的上下底边重合，和高度为0效果一样，为了解决这种情况，需要清除浮动。下面是具体的问题和方法。

代码：

<div id="box">
    <ul>
        <li style="background: #3CB371;"></li>
        <li style="background: #FFC125;"></li>
        <li style="background: #FAFAD2;"></li>
        <li style="background: #CD9B9B;"></li>
        <li style="background: #A0522D;"></li>
        <li style="background: #CD3333;"></li>
    </ul>   
</div>

样式：

#box li{
    width: 100px;
    height: 100px;
    float: left;
    list-style: none;
}

**

推荐方法一：

**
在最后一个li后面添加一个标签div,并且设置style=”clear:both;”,如下：

效果：

推荐方法二：

利用伪元素:after,给ul清除浮动

#box>ul:after{
    content: "";
    display: block;
    clear: both;
}

效果：

在:after为元素里面用到了content属性，这样这条样式的意思是在ul元素后面生成指定的内容，这里生成的内容是一个空字符串，因为只是让它来消除ul标签的高度折叠，并不让它显示出来。还有，这条样式里有display属性，要将他设置成block，这样clear属性才会起作用，因为清除操作只作用于块级元素，它的原理是为要执行清除操作的元素添加上边距，以此让元素降到浮动元素的下面，而操作行内元素的上边距不起作用。