5

我们正试图让我们的 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 没有任何高度或宽度。<div class="clear"></div>在 .footerInfo 之后添加是错误的吗？在那一点上，我似乎没有语义。

更一般的问题

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

4

5 回答 5

7

有几种清除浮动的方法：

1. 使用 CSS 伪 :after 类

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

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

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

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

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

3. 使用清除：两者

.clear { clear:both; }

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

于 2012-09-20T15:06:52.990 回答
2

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

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

于 2012-09-20T14:36:33.447 回答
0

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

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

这些的优缺点

空分区

优点

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

缺点

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

溢出

优点

  • 没有额外的标记。

缺点

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

伪选择器

优点

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

缺点

  • ie7 及更低版本不支持。
于 2012-09-20T15:01:38.690 回答
0

你试过使用很棒的 clearfix hack吗？您不需要以这种方式添加冗余的、非语义的空元素。

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

于 2012-09-20T14:34:12.243 回答
0

作为上述出色答案的一部分，我将再添加一种方法：

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

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

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

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

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

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

于 2012-10-30T15:02:45.483 回答