CSS最小高度无法在Mozilla FireFox上使用

Question

我创建了一个min-height的div标签，并将背景色设置为“红色”。但是在mozilla
firefox上，当内容超过最小高度限制时，div的高度不会增加。这是我的代码：

<style type="text/css"><!--
ul {
    display:block;
    padding:0px;
    width:500px;
}

.b {
    width:250px;
    float:left;
    display:block;
}

div {
    min-height:50px;
    width:500px;
    background-color:red;
}
--></style>

<div>
    <ul>
        <li class="b">asdsad</li>
        <li class="b">asdsad</li>
        <li class="b">asdsad</li>
        <li class="b">asdsad</li>
        <li class="b">asdsad</li>
        <li class="b">asdsad</li>
        <li class="b">asdsad</li>
    </ul>
</div>

似乎必须将div高度设置为适合内容，但是我不知道该怎么办。如果我不使用height则不能设置背景色。请告诉我如何使内容适合div，背景颜色将变为红色。
（不知道我是否解释清楚，所以请问我是否想进一步了解该问题。）

-谢谢。

解决： 谢谢大家的 友好 回答。

Answer 1

像这样更新您的css：

div{min-height:50px;width:500px;background-color:red;overflow:hidden;}

overflow:hidden; 添加

基本上，这是由于float:left在.b课堂上发生的
。这就是它的工作方式。通常，您可以通过添加overflow:hidden到父div或添加带有style =“
clear：both;”的元素来修复它。在父div的末尾。

您可以使用“ CSS clearfix”关键字搜索有关它的更多信息。