与 tables 布局中页脚上的 clear 属性有关的一些疑问答案

【问题标题】：Some doubts related to the clear property on the footer in a tabless layout与 tables 布局中页脚上的 clear 属性有关的一些疑问
【发布时间】：2013-07-21 16:09:31
【问题描述】：

我已经使用 HTML+CSS 实现了以下固定表格布局：http://onofri.org/example/WebTemplate/

（我必须完成一些设置）

此布局有两个浮动列 #content 和 #sidebar，在这些列下放置页脚 div #footcontainer

好的，所以我必须清除要放置在拖曳列下的元素（在文档的正常流程中恢复元素），为此我使用 clear CSS属性。

我已经读到我可以通过一些不同的方式做到这一点。

在我的示例中，我创建了一个 ID 为 clearer2 且具有以下 CSS 设置的空 div：

#clearer2{
    clear: both;
}

这很好用，但我知道我也可以通过这种方式直接清除页脚容器：

#footcontainer {
    clear: both;
    width: 100%;
    min-height: 200px;
    height: auto !important;
    height: 200px;
    background: #4f4f4f url(../images/bgfooter.jpg) repeat-x 0 0;
    box-shadow: 0 -13px 25px 5px #b2b2b2;
}

在逻辑级别应该是一样的，因为我在一个项目上设置了 clear:both; 属性，然后这个属性对所有连续的项目都有效。但是在线阅读在我看来，第一个解决方案比第二个解决方案更好。为什么创建一个新项目（作为空 div）更好，然后直接在适当的元素上执行（在示例中为 div #footercontainer）

我使用的解决方案是有效的解决方案吗？

Tnx

安德烈亚

【问题讨论】：

标签： html css layout xhtml

【解决方案1】：

具有clear: both 属性的 div 会使它们的父 div 扩展它们的高度，当它们内部只有浮动 div 时可以预期，正如http://www.quirksmode.org/css/clearing.html 中所述（标记为“旧解决方案”）。

所以在你的例子中，这就是clear: both 正在实现的目标。您无需重置正常流程，因为您的主 div（#container 和 #footcontainer）位于同一 div 层次结构级别，而不是浮动的。

您可能希望将这些属性添加到#container 以使其正确展开：

#container {
    ...
    overflow: auto;
    width: 770px; /* Needed for some older browsers */
}

【讨论】：