语义HTML和清晰:两者兼而有之

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,其中唯一的工作就是清除浮点数？

Answer 1

清除浮动有几种方法:

1.使用CSS伪:课后

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

将容器类应用于"widgetRow"div.这种方法可能是最具语义性的,但并不是所有浏览器都支持,特别是IE7及以下版本.浏览器支持:之后

2.使用overflow:auto或overflow:hidden

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

再次,将容器类应用于"widgetRow"div.这种方法可能会更加语义化,但它也可能会回来咬你,特别是在较小的显示器上查看时.overflow:auto可以在溢出时触发水平滚动条:隐藏可以将元素全部隐藏起来.使用oveflow清除浮子的问题

3.使用清楚:两者

.clear { clear:both; }

这是您使用的方法,假设您的明确类与上面的类相似.这是我所知道的唯一一种兼容所有浏览器的方法,不会给你带来不良副作用.所以,根据你支持的浏览器,我可能会坚持你所拥有的.