CSS Clearing Floats

Fra*_*ank 6 css

我正在努力将我的html结构与演示文稿分开,但有时当我查看hacks或变通方法的复杂性以使事物跨浏览器工作时,我惊讶于生产时间的巨大集体浪费投入此.

据我了解,浮动从未创建用于创建布局,但由于许多布局需要一个页脚,这就是它们经常被使用的方式.要清除浮动,可以添加一个清除两边的空div(div class ="clear").这很简单,可以跨浏览器工作,但它增加了"非语义"html,而不是解决CSS中的表示问题.

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

只要您了解自己在做什么以及为什么要这样做,这样做是否可以?或者是不是不惜一切代价找到CSS变通方法,黑客和单独的结构,甚至当提供的CSS演示工具没有发展到可以处理这些基本布局问题的时候?

but*_*oxa 1

你的方法是正确的。规则是为那些不理解规则的人制定的。如果您了解所有优点和缺点,请自行决定。

\n\n

在这种情况下,你特别有道理。CSS 决定忽略将内容 A 与内容 B 水平分离的普遍愿望,因此您必须选择您最不喜欢的 hack。我比较了这里已经提出的三种解决方案。

\n\n
    \n
  • 您的解决方案很糟糕,因为它更改了文档的内容,插入了元素 C,其唯一目的是 A 和 B 之间的视觉分离。内容不应该用于布局目的。
  • \n
  • Karpie\xe2\x80\x99s 解决方案稍差(在我的书中),因为它以一种狡猾的方式执行相同的操作。伪元素“:after”并不是为此而设计的。然而,它有一个很大的优点,那就是永远不会真正改变 HTML。
  • \n
  • PorneL\xe2\x80\x99s 解决方案通过彻底改变 A 的属性来实现 A 和 B 之间所需的分离。这种改变不仅会将 A 与 B 分离,还会将 A 与前面的内容分离,改变 A 宽度的计算方式,以及很快。当然,有时它\xe2\x80\x99完全没问题,但你必须意识到那些意想不到的副作用。
  • \n
\n\n

选择权是我们的。

\n