什么是利益无表的设计如果你需要清除块无处不在？

StackOverflow https://stackoverflow.com/questions/407420

  •  03-07-2019
  •  | 
  •  

题

我的理解是，我们的目标的走向 <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> 标签是使用严格的描述，样式，而是需要做的布局的工作。不这会毁了所有的好处，获取从消除表？

有帮助吗？

解决方案

如果我告诉你你 没有 需要清算块吗？

.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

其他提示

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

  

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

实际上，情况正好相反：从<span>转移到<div class='float-left'>会使您的HTML 更少语义。事实上，整点 noreferrer“> <div id='bottom'> （和 <div class='paragraph'> ）元素是 no 语义！

当我看到<span class='emphasis'> s的森林被描述为<！>“语义HTML <！>”时，它总是让我失望。不，这不对！这是* un- *语义HTML！特别是如果它包含很多<address>，<ul>和我个人的最爱<=>和<=>。

不要误解我的意思，使用非语义<=> s肯定比使用错误的 -semantic <=> s更好，但更好的方法是使用语义正确的元素<！> nbsp; <！>＃8211;虽然在许多情况下问题是HTML不提供任何。例如，在您的代码段中，您使用<=>元素，但根据规范，此元素不用于标记地址！ 仅用于标记页面作者的地址 <！> nbsp; <！>＃8211; IOW它完全无用。

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

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

没有。还有很多其他的好处，以避免使用表。

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

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

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top