什么是逻辑和语义正确、兼容 A 级浏览器且 W3C 有效的清除浮动的方法？

Question

什么是逻辑上正确且 W3C 有效的清除浮动的方法？

1. zoom:1 在 W3C 中无效，IE8 没有哈希布局问题
2. overflow:hidden 和 overflow:hidden 不是为了这样做，因为规范 预期要使用的溢出
3. 不是 语义上正确，我不想添加额外的标记。
4. clearfix hack 生成的内容 确实没有任何语义价值。

我问了很多问题并阅读了很多关于这个问题的文章，但还没有找到最好的方法。

Answer 1

使用 clearfix

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

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

Answer 2

在语义上不正确，我不想添加额外的标记。

这就是为什么经常使用
的原因。您基本上希望在浮动元素和下一个元素之间有一个换行符。确实，标记不太好，但这就是使用浮动的好处。

或者，您也可以在要放入下一行的后续块元素上设置 clear: Both; 。