什么是处理CSS浮动的正确,标准方法

时间:2010-07-01 18:03:55

标签: html css

我一直认为处理CSS浮动的正确方法是使用一个明确的div:在伪类之后,或者在父类上使用overflow:auto。据我所知, 设计用于清除浮动并将父元素扩展回正常。那是它的目的,是吗?

今天我发现了一种处理浮动(和父崩溃)的替代方法:浮动父项以使其在浮动子项周围展开。

这与网络标准如何一致?是否有官方的浮动/明确标准?

4 个答案:

答案 0 :(得分:1)

此处没有特别标准。使用在这种情况下的任何工作。

添加额外的HTML元素只是为了清除浮动是不受欢迎的,但偶尔会有用。

我个人更喜欢使用漂浮父母的Float Nearly Everything风格,但它并不适合所有情况。

答案 1 :(得分:1)

所有这些方法都很糟糕 - 浮动从来没有真正设计用于我们使用它们的各种布局。它们旨在控制图像之类的文本流。因此,正如埃德韦雷特所说,没有一种获得批准的方法 - 在您的环境中使用任何可行的方法!

我个人更喜欢overflow:hidden方法,因为它简单。我从来没有遇到过这个问题。

带上css3和多列!

http://www.css3.info/preview/multi-column-layout/

答案 2 :(得分:0)

当我第一次学习CSS时,我使用了亲子浮动方法(有趣的故事,我实际上只使用了浮点数+宽度(现在我已经读过它并不那么有趣))但是现在我觉得它只是简单的脏。我的意思是你在哪里停下来?你是不是只想把所有东西都搞砸了?

这当然会起作用,但我发现更优雅的解决方案是在必要时应用浮子(适当地衬里元素)并适当地清除它们。这些天我甚至提出了一些立场:绝对和位置:相对于混合。

清除是为了移除浮动,我不确定它是否有用。

当然,CSS是一个可以正确学习的somb1tch所以也许我刚输入的所有东西都是纯粹的猜想,你不应该听我的任何舌头摇摆。

答案 3 :(得分:0)

正如@edeverett所说,没有特别的标准。

真正的初学者使用绝对定位并进入梦魇模式,因为有很多限制和需要注意的事项。

初学者倾向于将内容中的所有内容浮动,然后搜索父级的背景所在的位置,尽管流程中没有内容,父级不再具有可见的背景...
IE6和最后一栏(对整个设计来说太大)的困难时期都在其他人之下(因为是否会使利润浮动bug增加一倍或宽度为100%+填充/边缘对孩子而言)

然后你学习了许多不同的技巧,每种技术都有它的强度,约束和问题。

然后,您将通过经验来了解以使用它们。甚至在很少的情况下绝对定位;在绝望的情况下甚至是布局表。它们很糟糕,但是一旦你在某处添加1px就会有25个div等待爆炸的布局更糟糕 根据经验,从流中删除内容越少,问题就越少。在CSS中总是有很多方法可以做同样的事情。

我个人最喜欢的是多才多艺的 display: inline-block;
现在Fx 3.x已经取代了Fx 2.0(3.0甚至消失了),每个浏览器都支持它(display: inline; + zoom: 1; + IE的条件评论< 8)。
我能想到的两个小烦恼:

  • 空格需要两个连续div之间的</div><!-- comment --><div>之类的技巧才能避免它
  • vertical-align: top;经常是必需的,当你开始使用它时很难发现

在带有标签+每行输入的表单上,与浮点数相比,它确实有奇效。在页眉或页脚中也是如此。