html - 语义 HTML 和清除 : both

Question

我们正在努力使我们的 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，它的唯一作用就是清除 float ？

Answer 1

有几种清除 float 的方法:

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