0

曾几何时,IE6 缺乏对 CSS 功能的支持,例如“display: table-cell”和 inline-block,导致“float”被劫持并用于布局——这从来不是为(或特别擅长)设计的。

使用浮动似乎会导致布局过于脆弱,难以维护,并且经常随着动态内容的变化而完全崩溃。

这在当时是一个必要的邪恶,但是现在对 IE8 之前的浏览器的支持不再那么令人担忧了,理论上我们应该能够摆脱浮动并使用 CSS 中实际上适用于布局的部分 - 例如上述显示:table-cell 和 inline-block。

我目前正在考虑建议我的团队完全放弃基于浮动的设计 - 我是否有可能将自己画到一个角落并遇到问题,或者如果旧版浏览器支持对我们的项目不重要,这是一个更好的选择?

4

2 回答 2

6

你应该完全远离花车吗?

当然,只要您不需要更深入的浏览器支持。归根结底,真正重要的是页面是否为尽可能多的访问者正确显示,对吗?

您应该关心的另一个问题是可维护性,但我不能准确地说任何一种方法在每种情况下都比另一种方法的可维护性差。因此,我只想问自己,您的团队更熟悉哪种布局方法以及您需要支持多远。

display: table-cellIE8+ 支持。浮动显示可以一直回到 IE6。

其他想法和未来...

与你所说的浮点数相反,我认为如果使用得当,它们是非常可预测的。我对他们的主要疑虑是需要清除父母,这有点尴尬。此外,像Bootstrap960-Grid这样流行的脚手架系统仍然选择使用浮点数,这是有充分理由的:它们很有用,有很好的跨浏览器支持,并且可以做你需要做的事情。

话虽如此,Css 和布局的未来看起来不错。Css 中有两种即将出现的布局模型:网格系统flexbox 模型。两者都还没有推荐,所以浏览器对它们的支持有点不稳定

网格系统类似于display: table-cell但给你更大的控制。Flexbox 试图概括和抽象显示元素的想法,这允许真正强大、流畅(或“灵活”)的布局。一旦它们在浏览器中实现,这两者都会非常惊人。

如果你想了解更多关于 flexbox 的使用,我推荐 MDN 上关于它的优秀文章

如果我是你,我会坚持使用浮点数——特别是通过使用脚手架框架。很久很久以来,我都不担心写脚手架 Css;我使用框架,因为代码已经为我编写好了。而且,对我来说,只有当 flexbox 和网格系统成为推荐并得到更广泛的实施时,我才发现完全重组项目是值得的。

于 2013-05-29T12:12:39.817 回答
2

就像你说的那样,什么对你的团队最有利,但相信我......如果你使用float正确并且在正确的地方你不会因为你改变 div 内容而破坏布局。

但是将来最好的方法是使用flexbox,你可以完成所有关于水平,垂直,相同大小,不同大小的块的事情......无论如何,当所有浏览器都支持它时,将会非常棒。

于 2013-05-29T12:12:27.623 回答