Html 浮动div应该有高度吗

我不熟悉CSS和HTML，我对浮动元素的高度有一个问题：

当我将“content”div的高度设置为大于或等于“main”div高度时，页脚的页边距顶部将正确显示，但一旦我将content div的高度更改为auto，页脚的页边距顶部将不起作用。我真的想知道是否有任何解决方案，使内容高度自动，但尊重页脚的页边顶部。请帮帮我。我已经尝试了一切：各种各样的clearfixes，overflow等等

<div id="container">
    <div id="header"></div>
    <div id="content">
        <div id="sidebar"></div>
        <div id="main"></div>
    </div>
    <div id="footer"></div>
</div>

#container { width:800px; height:auto; background:#000; }
#header { width:800px; height:80px; background:#333; }
#content { width:800px; height:500px; background:#999; }
#main { width:600px; height:500px; background:skyblue; float:right; }
#sidebar { width:200px; height:500px; background:silver; float:left; }
#footer { width:800px; height:80px; background:green; clear:both; margin-top:10px; }

#容器{宽度：800px；高度：自动；背景：#000；}
#标题{宽度：800px；高度：80px；背景：#333；}
#内容{宽度：800px；高度：500px；背景：#999；}
#主{宽度：600px；高度：500px；背景：天蓝色；浮动：右侧；}
#边栏{宽度：200px；高度：500px；背景：银色；浮动：左侧；}
#页脚{宽度：800px；高度：80px；背景：绿色；清除：两者；页边顶部：10px；}

快速修复…这里有一个

---

设置的问题是，当您将

#container

的

高度设置为
auto
时，其高度实际上计算为零。这是因为
#container
包含纯浮动元素，在计算
#container
的高度时会忽略这些元素

若要解决此问题，请在
#content
内但在任何其他内容之后添加clearfix。例如：

<div id="content">
    <div id="sidebar"></div>
    <div id="main"></div>
    <div class="clearfix"></div>
</div>

您可以看到它在这里工作：
使用
overflow:hidden
属性

“溢出：隐藏”通常用于浮动安全壳。
但是，它可以做更多特殊的事情：防止元素的边距
防止元素与其子元素一起塌陷，并防止
在相邻浮动元素的“后面”延伸

资料来源：

我觉得不错。谢谢你的回答，但你已经添加了边距的主要和侧边栏div这正是我现在所做的，但我想添加边距页脚没有添加任何底部边距的其他div。谢谢它的工作，这是非常有帮助的，我实际上使用了溢出：自动；因为我需要在必要时滚动内容，但它仍然有效，
<div id="content">
    <div id="sidebar"></div>
    <div id="main"></div>
    <div class="clearfix"></div>
</div>

.clearfix { clear: both }

#content{
    width:800px;
    height:auto;
    background:#999;
    overflow:hidden;
}