【问题标题】：Semantic HTML and clear: both语义 HTML 和清晰：两者
【发布时间】：2012-09-12 22:54:34
【问题描述】：

我们正在努力使我们的 HTML 更加语义化，而在我们的 HTML 中似乎与表示有关的一件事是

<div class="clear"></div>

例如，如果我们有以下语义html：

<div class="widgetRow">
    <div class="headerInfo">My header info</div>
    <div class="widgetPricing">$20 to $30</div>
    <div class="footerInfo">My footer info</div>
</div>

我的 headerInfo 和 footerInfo 在 CSS 中都向左浮动，而 widgetPricing 向右浮动（仅作为示例）。

问题：

我的 widgetRow div 没有任何高度或宽度。在 .footerInfo 之后添加 <div class="clear"></div> 是错误的吗？在那一点上，我似乎没有语义。

更通用的问题

在编写语义 HTML 时，是否可以在 HTML 中放置一个 div，其唯一工作是清除浮动？

【问题讨论】：

你只需要添加溢出：隐藏；并明确：两者；到 widgetRow 使其高度和宽度变为非零。不需要“清晰”的 div IMO。

标签： html css semantics semantic-markup

【解决方案1】：

您是否尝试过使用awesome clearfix hack？您不需要以这种方式添加多余的、非语义的空元素。

要回答您更一般的问题 - 不，出于布局目的添加空元素在语义上是无效的。但是，如果您有几个空的<div> 标签，没有人会受到伤害！ :)

【讨论】：

【解决方案2】：

没有。应避免仅为视觉/样式目的引入空标记（这也使页面难以维护/缩放）

您可以改为使用一些非结构性清除方法，例如 easyclearing（也被 H5BP 使用）为浮动包装器添加一些额外的样式

【讨论】：

【解决方案3】：

我知道清除浮动的三种基本方法。

像您指定的那样带有clear:both; 的空 div。
将 CSS 属性 overflow: auto 添加到父 div。
使用 CSS 伪选择器在元素之后引入一个元素并清除其上的浮动。

这些的优缺点

空分区

专业人士

浏览器广泛支持。
没有任何副作用。

缺点

添加额外的标记只是为了清除浮动。
许多人认为这不是语义。

溢出

专业人士

没有额外的标记。

缺点

在某些情况下可能会触发不需要的滚动条。
溢出自动并不是真正打算用于清除浮动的特定目的。

伪选择器

专业人士

没有额外的标记。
比其他方法更优雅，imo。

缺点

在 ie7 及更低版本中不支持。

【讨论】：

【解决方案4】：

有几种清除浮动的方法：

1 .使用 CSS 伪 :after class

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

将容器类应用到您的“widgetRow”div。这种方法可能是最语义化的，但并非所有浏览器都支持，特别是 IE7 及以下。 browser support for :after

2 。使用溢出：自动或溢出：隐藏

.container { overflow:auto; }
.container { overflow:hidden; }

再次，将容器类应用到您的“widgetRow”div。这种方法可能更具语义性，但它也可能会反过来咬你，尤其是在较小的显示器上观看时。 overflow:auto 可以触发水平滚动条，而 overflow:hidden 可以将元素隐藏在一起。 problems using oveflow to clear floats

3 .使用 clear:both

.clear { clear:both; }

这是您正在使用的方法，假设您的 clear 类与上面的类类似。这是我所知道的唯一一种在所有浏览器中都兼容并且不会给您带来不良副作用的方法。因此，根据您支持的浏览器，我可能会坚持使用您拥有的浏览器。

【讨论】：

哈哈，不用担心，+1 它在视觉上比我的更有条理。
史蒂夫，简单评论一下。 .container:after { clear:both; } 不应该也有 content 属性吗？我不相信没有一些内容它会起作用。
是否需要此链接中的所有 css？ webtoolkit.info/css-clearfix.html
asiz，你是对的。您还需要内容：“。”在课堂里。我已经更新了我的答案以反映这一点。
{ clear: both; content: "." } 或 { display: table; content: " " } 都可以。

【解决方案5】：

上面优秀答案的一部分，我想再添加一种方法：

4.使用 display:inline-block + vertical-align:top

这个也可能变得棘手，特别是在 IE7 和更早版本中，因为，根据http://www.quirksmode.org/css/display.html

IE 6/7 只接受具有自然显示的元素的值：内联

现在得到了广泛的支持，对于某些元素，它甚至可以与 IE6/7 一起使用，并且您将获得与浮动元素相同的效果，但没有清除问题。在某些情况下，您甚至可以对标记（将保持语义）稍作更改以使用本机内联元素。 hack 也可以仅用于 IE，请参阅 IE7 does not understand display: inline-block

Anex：溢出的另一个可能问题：隐藏

我最近遇到的另一个 对 overflow:hidden 方法的缺点：当在 overflow:hidden 元素中使用绝对定位元素时，这些元素将被容器裁剪。因此，例如，CSS 下拉菜单将无法正常工作。

【讨论】：