现代浏览器是否还需要基于浮动的布局?

Jam*_*ies 0 css layout html5 css-float

曾经有一段时间IE6缺乏对CSS功能的支持,例如"display:table-cell"和inline-block,导致"float"被劫持并用于布局 - 这是从未设计过的(或者特别擅长).

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

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

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

jam*_*ase 5

你应该完全离开花车吗?

当然,只要您不需要更深入的浏览器支持.归根结底,真正重要的是页面是否能够为您网站上最多的访问者显示,对吧?

另一个值得关注的问题是可维护性,但我不能说在任何情况下这两种方法都比其他方法更难维护是准确的.因此,我只想问问一下您的团队更熟悉的布局方法以及您需要支持的距离.

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

其他想法和未来......

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

话虽如此,未来对于Css和布局看起来很好.Css中有两种即将推出的布局模型:网格系统flexbox模型.目前还没有推荐,所以浏览器支持对他们来说有点不稳定.

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

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

如果我是你,我只是坚持使用浮子 - 特别是使用脚手架框架.我不担心长时间写脚手架Css; 我使用框架,因为代码已经为我编写了.而且,对我来说,一旦flexbox和网格系统成为推荐并得到更广泛的实施,我只会发现完全重组项目是值得的.