如果您需要到处清理积木，那么无表设计有什么好处？答案

【问题标题】：What is the benefit of tableless design if you need clearing blocks everywhere?如果您需要到处清理积木，那么无表设计有什么好处？
【发布时间】：2010-09-29 06:37:30
【问题描述】：

我知道从<table> 转向<div> 标签的目标是有意义的，因为它更具语义性。但是，如果您仍然需要一个清除块来使基于列的布局工作，我不明白所获得的好处。例如：

<!-- Note: location-info & personal-info both float left. -->
<div class="contact"> 
    <div class="personal-info">
        <p>
           Shawn, etc, etc
        </p>
    </div>
    <div class="location-info">
        <p><address>etc</address></p>
    </div>
    <br style="clear:both" /> <!-- clearing block -->
 </div>

无关的<br>标签严格用于描述风格，并且是使布局工作所必需的。这不会破坏删除表格所获得的所有好处吗？

【问题讨论】：

不管怎样，如果您正在显示表格数据（看起来确实如此），您仍然应该使用表格。

标签： html css semantic-markup

【解决方案1】：

如果我告诉你 you didn't need 一个清算块呢？

.clear-block:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clear-block {
    display: inline-block;
}

<div id="wrapper" class="clear-block">
    <div style="float:right">
        Your content here
    </div>
    <div style="float:left">
        More content here
    </div>
</div>

JSFiddle

【讨论】：

我想你会发现，神奇的词是“hasLayout” - 在这三个链接中的任何一个上尝试 IE6 的 ctrl+f
IE8 终于摆脱了 hasLayout 的废话。逾期约 10 年，但我们必须尽我们所能...... :)

【解决方案2】：

如果您正在显示表格数据，使用表格仍然比使用许多浮动 div 更有意义。明智地使用您拥有的工具 - 不要在表格是最佳选择的情况下盲目使用 CSS。

【讨论】：

嘿，这也是真的，很高兴看到这个建议，这意味着人们在做正确的事情，主要是:)
没错，虽然我不会说桌子是这里的最佳选择。这不是我所说的表格数据。
只有 OP 才能确切知道。对我来说，这听起来好像他试图在没有表格的情况下显示表格数据。

【解决方案3】：

我知道从<table> 转向<div> 标签的目标是有意义的，因为它更具语义性。

实际上，恰恰相反：从 <table> 移动到 <div> 会使您的 HTML less 语义化。事实上，<div>（和<span>）元素的全部意义就是没有语义！

当我看到被描述为“语义 HTML”的 <div>s 森林时，它总是让我兴奋不已。不，这不对！那是 *un-* 语义 HTML！特别是如果它包含很多<div class='float-left'>、<div id='bottom'> 和我个人最喜欢的<div class='paragraph'> 和<span class='emphasis'>。

不要误会我的意思，使用非语义<div>s 肯定比使用错误-语义<table>s 更好，但更好的是使用语义正确的 元素——尽管在许多情况下，问题在于 HTML 不提供任何元素。例如，在您的 sn-p 中，您使用 <address> 元素，但根据 the specification，此元素不是用于标记地址！仅用于标记页面作者的地址 - IOW 这完全没用。

您发布的示例缺少很多上下文，因此很难说，但实际上您可能希望显示表格或分层数据，在这种情况下<table>s 或<ul>s可能是更好的选择。

与您的问题完全无关：您可能想看看 hCard 和 XOXO 微格式。

【讨论】：

div - 除法有一些含义。
看看他的例子，它的语义比基于表的等价物要好得多。 div 表示包含的信息在语义上是相关的。诸如“个人信息”之类的类在语义上识别信息。你在这里所说的只是“如果你分配的类真的很糟糕并且使用了错误的标签，那么它就不再是语义化了。嗯，呵呵！

【解决方案4】：

一点也不。避免使用表格还有很多其他好处。

【讨论】：

我说的是在这种特定情况下，2列布局
答案也适用于特定情况。使用现有的东西比使用表格要好得多。这样你有 1 个无关标签（大部分可以忽略），另一种方式你至少有 10 个不能忽略。
另外，这似乎是多余的，如 annakata 的链接所示。

【解决方案5】：

我个人使用 clearfix hack 来满足我的清算需求。

/* Clearfix */
#content:after,
.box:after {
  content:'.';
  display: block;
  clear: both; 
  visibility: hidden; 
  height: 0;
}
#content,
.box {
  zoom: 1; /* IE */
}

请注意，我只是用逗号分隔选择器，而不是将 clearfix 类添加到所有内容中。它真的很好用。唯一的问题是 zoom 属性是 IE 特定的并且无法验证，但是没有像 overflow: auto 这样的其他属性有时会出现的副作用。

我已经在专业网站上使用它 5 年了，没有任何问题。

【讨论】：

【解决方案6】：

正如 annakata 的回答所示，您不需要那些清除块。但除此之外，避免使用表格的一个优点是可以逐步呈现页面。只有当整个表格（包括其所有内容）已被解析后，才能呈现表格，如果您的页面很大且连接速度较慢，则可能需要一段时间。 div 可以立即呈现，这意味着您可以比使用表格更快地向用户呈现可用的东西。

当然，这只是一个不错的小奖励优势，它不是，也不应该是避免使用表格的原因（对于非表格数据）

【讨论】：