9

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

<!-- 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>标记严格用于描述样式，并且是使布局正常工作所必需的。这不会破坏删除表格所获得的所有好处吗？

4

6 回答 6

31

如果我告诉你你不需要清理 块 怎么办？

.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

于 2009-01-02T17:06:14.817 回答
11

如果您正在显示表格数据，那么使用表格仍然比使用许多浮动 div 更有意义。明智地使用你拥有的工具——不要盲目地使用 CSS，因为表格是最好的选择。

于 2009-01-02T17:15:13.927 回答
8

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

实际上，恰恰相反：从<table>到<div>使您的 HTML语义更少。事实上，(and ) 元素的全部意义在于没有语义！<div><span>

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

不要误会我的意思，使用 un-semantic<div>肯定比使用wrong -semantic<table>更好，但更好的是使用语义正确的元素——尽管在许多情况下问题是 HTML 不提供任何元素。例如，在您的代码段中，您使用了该<address>元素，但根据规范，该元素并非用于标记地址！它仅用于标记页面作者的地址 - IOW 它完全没用。

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

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

于 2009-01-02T23:03:22.553 回答
1

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

于 2009-01-02T17:08:12.207 回答
1

我个人使用 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 年了，没有任何问题。

于 2009-01-03T00:28:50.523 回答
0

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

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

于 2009-01-02T17:21:13.680 回答