CSS 清算 float

Question

我正在努力将我的 html 结构与表示分离，但有时当我看到使事情跨浏览器工作的黑客或变通方法的复杂性时，我惊讶于生产力的巨大集体浪费投入其中的时间。

据我了解， float 从来都不是为了创建布局而创建的，但由于许多布局需要页脚，因此它们经常被使用。要清除 float ，您可以添加一个清除两侧的空 div (div class="clear")。这很简单并且可以跨浏览器工作，但它添加了“非语义”html 而不是解决 CSS 中的表示问题。

我意识到这一点，但是在查看了所有解决方案及其优缺点之后，使用空 div(跨浏览器的可预测行为)似乎更有意义，而不是创建单独的样式表，包括各种 css hack和解决方法等，这些也需要随着 CSS 的发展而改变。

可以吗？只要您确实了解自己在做什么以及为什么要这样做，就可以这样做吗？还是不惜一切代价找到 CSS 变通办法、技巧和将结构与表示分离更好，即使提供的 CSS 表示工具还没有发展到可以处理此类基本布局问题的程度？

Answer 1

大多数时候 Clearfix 是不必要的，流行的 hack 版本不必要地冗长和复杂。

您可以通过对容器应用overflow:hidden 来获得清除效果。如果容器没有固定高度，它无论如何都会拉伸(stretch)到内容的大小。这不是黑客，而是specified behavior适用于所有浏览器。

当你真的需要 overflow:visible 时，你仍然可以清除标记中的额外元素:

 .container::after {
    content:"";  /* not "."! */
    display:block;
    clear:both;
 }

这是完全标准的 CSS 2.1。在不支持 CSS 2.1 的 IE 版本中，hasLayout 恰好起到了预期的效果:

 .container {
    zoom:1;
 }