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

0

在示例页面中，您有两个版本。

带有空清除器的 HTMLdiv 

<div id="container">
    <div id="content">...</div>
    <div id="sidebar">...</div>
    <div class="clearer"></div>
</div>
<div id="footcontainer">
    <div id="footer">...</div>
</div>

CSS：

#content, #sidebar { float: left; }
.clearer {
    clear: both;
    visibility: hidden;
}

并且没有空div 

<div id="container">
    <div id="content">...</div>
    <div id="sidebar">...</div>
</div>
<div id="footcontainer" class="clearer">
    <div id="footer">...</div>
</div>

CSS：

#content, #sidebar { float: left; }
.clearer { clear: both; }

两种方法都是有效的，视觉结果是相同的。

但在第一个示例中container，由于更清晰的 div 为空，因此高度不为零。因为浮动 div 已从正常流程中移除，container所以第二个示例中的 div 没有内容且高度为零。

于 2013-07-21T10:28:09.020 回答