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

Question

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

1. zoom:1W3C 无效，IE8 没有哈希布局问题
2. overflow:hidden并且overflow:hidden 没有这样做，因为规范打算使用溢出
3. <div class="clear"/>在语义上不正确，我不想添加额外的标记。
4. clearfix hack 生成的内容实际上没有任何语义价值。

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

Answer 1

使用清除修复

.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

<div class="clear"/>在语义上不正确，我不想添加额外的标记。

这就是为什么经常<br class="clear">使用 a 的原因。您基本上希望在浮动和下一个元素之间有一个换行符。诚然，标记并不好，但这是使用浮点数的回报。

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