Div 似乎没有在高度上延伸答案

【问题标题】：Div doesn't seem to extend in heightDiv 似乎没有在高度上延伸
【发布时间】：2014-01-19 02:35:09
【问题描述】：

所以，我有这个：

HTML：

<div id="main">
    <div id="top"></div>
    <div id="mid">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div id="bottom">
    </div>
</div>

CSS：

#main {
    height: auto;
    width: 300px;
    background: black;
}
#top {
    height: 1px;
    width: 300px;
    background: yellow;

}
#mid {
    height: auto;
    width: 300px;
}
.item {
    height: 20px;
    width: 90px;
    color: red;
    float: left;
    margin-left: 2px;
    margin-top: 2px;
}
#bottom {
    width: 300px;
    height: 1px;
    background: yellow; 
}

Demo

这基本上应该是一个导航菜单。它显然是实际网站上的一个简化版本，但从功能上讲，它应该是这样工作的。

#main 是整个事物的主要包装器，它旨在包含所有元素。出于这个原因，它有 height: auto;因为它的高度取决于其中的项目数量。

#top 只是一个具有不同背景颜色的空 div，用作顶部边框（在网站上这是一个图像，因此需要一个 div）。

然后#mid 将包含所有实际项目（是的，您可以说这不是必需的，但它的存在对手头的问题没有影响）。

那么 .item 将是整个事物中的实际列表项。现在，如果您尝试代码，您会发现在整个父 div 中，只有 3 个项目可以放在水平行中，并且从第 4 个项目开始，它将开始一个新行；那么如果你添加更多，它将再次从第 7 行开始添加一个新行。

到目前为止一切都很好，但问题是 div #main 和 #mid 在第一行之后没有增加高度；尽管 height: auto; 他们完全忽略了在下面创建的任何行。 .为什么会这样？如何解决？

【问题讨论】：

阅读here 了解为什么会这样

标签： html css css-float height

【解决方案1】：

通过在 css 属性后添加 !important 来尝试。例如：#mid { height: auto !important; width: 300px !important; }

【讨论】：

【解决方案2】：

我与您的demo 合作并制作了working update

我改变了什么：

我从#main 中删除了height: auto;，因为这已经是标准值，不需要设置
我添加了一个所谓的 clearfix^{(google it)} 到 clear 浮动项目。如果你浮动一个元素，它会从常规文档流中移除，所以这是需要的

添加了 CSS：（Clearfix source）

.cf:after{
    content: "";
    display: table;
    clear: both;
}

添加了 HTML：

<!-- added class="cf" -->
<div id="mid" class="cf">

【讨论】：

确实，这是正确的解决方案。它还在实际网站上修复了它。非常感谢，新年快乐！
@user3075470 我已对您的问题表示赞同，因此您很快就能获得初始 SO 权限。 :)
呵呵，谢谢。我永远不会自己解决这个问题，所以再次感谢。 :)

【解决方案3】：

您必须使用 clear:both; 将声明元素的 div 的高度推入 de div；这使得 div 容器的高度与所有浮动项的高度相同。给你：

http://jsfiddle.net/hitaboy/cXaws/4/

<div id="main">
    <div id="top"></div>
    <div id="mid">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="clearer"></div>
    </div>
    <div id="bottom"></div>
</div>

【讨论】：