Question

我正在努力将我的html结构与演示文稿分开，但有时当我查看hacks或变通方法的复杂性以使事物跨浏览器工作时，我惊讶于巨大的集体浪费这个小时就被投入了。

据我了解，浮动从未创建用于创建布局，但由于许多布局需要页脚，因此它们经常被使用。要清除浮动，可以添加一个清除两边的空div（div class =“clear”）。这很简单，可以跨浏览器工作，但它增加了“非语义”的HTML，而不是解决CSS中的表示问题。

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

是o.k.只要你明白你在做什么以及为什么要这样做，这样做呢？或者是不是不惜一切代价找到CSS变通方法，黑客和单独的结构，甚至当提供的CSS演示工具没有发展到可以处理这些基本布局问题的时候？

Answer 1

大部分时间都不需要Clearfix，而且流行的hack版本也是不必要的冗长和复杂。

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

当你真的需要overflow:visible时，你仍然可以在标记中没有额外元素的情况下清除：

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

这是完全标准的CSS 2.1。在不支持CSS 2.1的IE版本中，hasLayout恰好具有预期的效果：

 .container {
    zoom:1;
 }

Answer 2

我绝对不同意使用额外标记来清除div的想法。

我赞成“群组”方法 - 将class="group"放在父div上，使用以下CSS：

/* Clear groups of floats by putting class="group" on their parent */
.group:after 
{
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; 
}

在IE6 / 7的IE特定样式表中：

/* IE7 */
.group
{
    min-height: 1px;
}

/* IE6 */
* html .group
{
    height: 1%;
}

这一点在Andy Budd的CSS Mastery中有详细介绍。它稍微延伸了语义，但它有意义 - 你将浮动的div组合在一起，显然它们之间有一些关系。

编辑：我不认为这是一个巨大的黑客攻击或解决方法 - 该方法已经存在多年的各种形式，（通常称为'clearfix'方法），我不认为它随时都会消失很快。

Answer 3

你的是正确的方法。为不理解它们的人创建规则。如果你了解所有的优点和反对意见，请自己打电话。

在这种情况下，你特别合理。 CSS决定忽略将内容A与内容B水平分离的共同愿望，因此您必须选择一个您最不喜欢的黑客。我比较了这里已经提出的三种解决方案。

你的解决方案很糟糕，因为它改变了文档的内容，插入了元素C，其唯一目的是在A和B之间进行视觉分离。内容不应该用于布局目的。
Karpie的解决方案稍差（在我的书中）因为它以狡猾的方式做同样的事情。伪元素“：after”不是为此而设计的。然而，它具有很大的优势，从未真正改变HTML。
PorneL的解决方案通过A的性质的根本变化实现了A和B之间的期望分离。该变化不仅将A与B分开，而且还将A与前面的内容分开，改变A的宽度计算方式等等。当然，有时它完全没问题，但你必须意识到那些意想不到的副作用。

选择是我们的。

CSS Clearing Floats

3 个答案: