使用float元素时的动态背景高度

Question

http://jsfiddle.net/nUcXQ/

如何在主要（黑色背景）上获得动态高度我正在使用图像所以我不能使用repeat-y- 此外，如果main没有任何列表元素，则高度必须为0px

必须在IE8中工作

Answer 1

不要将高度限制在10px，除非你试图做某事而我只是错过它。

.main{
    background: black;
    width: 300px;
}

li {
    float: left;
    margin-left: 4px;
    background: lightblue;
}

你唯一需要的是一个clearfix来阻止最后一个li之后的浮动。

.clearfix {
    clear: both;
}

<br class="clearfix"> 

demo

Answer 2

Updated Fiddle

尝试删除任何高度声明并浮动.main

.main{
    background: black;
    width: 300px;
    float: left;
}

li {
    float: left;
    margin-left: 4px;
    background: lightblue;
}

Answer 3

这将在IE8中有效 - 在.main删除所有height引用并添加display:inline-block;。

Answer 4

从主类中删除以下行

height:10px;

在关闭ul

后立即添加此行

<div style="clear:both;"></div>

更新了jsfiddle：http://jsfiddle.net/nUcXQ/3/