如果您需要在任何地方清除块,那么无表格设计有什么好处？

Question

我理解<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>标记用于严格描述样式,并且需要使布局工作.这是否会破坏从删除表中获得的所有好处？

Answer 1

如果我告诉你,你 并不 需要结算块？

.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

Answer 2

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

Answer 3

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

其实,这是完全相反:从移动<table>到<div>使你的HTML 少语义.事实上,整点的的<div>(和<span>)元素是有没有语义!

当我看到被<div>描述为"语义HTML" 的森林时,它总是让我感到震惊.不,这不对!这是*un-*语义HTML!特别是如果它包含很多<div class='float-left'>,<div id='bottom'>我个人的最爱<div class='paragraph'>和<span class='emphasis'>.

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

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

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