浮动布局不好吗？应该用什么代替它？

Question

大约一周前，我已经从用于设计网页的 HTML 表格布局跳转到 CSS，并且从那以后一直在阅读更多关于它的内容。昨天，我在这里阅读了一篇关于 Stack overflow 的长篇文章，其中用户正在敲 float 以及它们在布局方面的弃用程度。有很多关于 inline-block 被用来代替它的讨论。

我有一个刚刚完成的 HTML5 设计，它在 Firefox 和 Chrome 中看起来很棒，但在 Internet Explorer 7、8 和 9 中测试时，设计绝对 _爆炸_。在我 _看来_，我在这个设计中正确浮动的任何内容在 IE 中都不被尊重。它似乎只是包裹在它左边的任何东西下面。

我想知道我是否可以使用浮点数，或者我是否应该使用 inline-block 代替。使用 inline-block 如何让两个 div 彼此相邻（其中一个在左侧，另一个在右侧）的示例会很好。

原文由 Muzz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

花车从来都不是用来布局的。

它们只是用来获取一个元素，将其放在一边，然后让其他内容围绕它流动。就这样。

Eric A. Meyer，在 Floats Don’t Suck 如果你正确使用它们

早期的网络受到印刷/学术出版物的影响，其中使用浮动来控制图形和表格周围的文本流动。

那我们为什么要用它们来布局呢？

因为可以清除两个浮动列下方的页脚，浮动布局应运而生。如果有一种方法可以“清除”定位元素下方的元素，我们就不会费心使用浮动进行布局。

如今， CSS 灵活框布局模块 flex 和 CSS 网格布局模块 grid 针对用户界面设计和复杂布局进行了优化，有望相互补充。

Grid 强制二维对齐，使用自上而下的布局方法，允许项目显式重叠，并具有更强大的跨越功能。 Flexbox 专注于轴内的空间分布，使用更简单的自下而上的布局方法，可以使用基于内容大小的换行系统来控制其次轴，并依赖底层标记层次结构来构建更复杂的布局。

在撰写本文时，Flexbox 和 Grid 分别是 W3C 候选推荐和候选推荐草案。 所有主流浏览器都支持 Flexbox，并且在 IE11 中存在已知问题。 所有主流浏览器都支持 网格，但 IE11 支持旧版本的规范。

原文由 melhosseiny 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这个问题来自 2012 年，其他答案已过时。

浮动不应再用于布局（尽管您仍然可以将它们用于最初的目的——在图像周围浮动文本）。

Flexbox 现在得到广泛支持，更适合布局。

原文由 MGOwen 发布，翻译遵循 CC BY-SA 4.0 许可协议