0

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

（我必须完成一些设置）

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

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

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

在我的示例中，我创建了一个具有以下 CSS 设置的id clearer2的空 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）

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

肿瘤坏死因子

安德烈亚

4

1 回答 1

1

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

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

您可能需要添加这些属性以#container使其正确扩展：

#container {
    ...
    overflow: auto;
    width: 770px; /* Needed for some older browsers */
}
于 2013-07-22T06:51:10.973 回答