响应式网格框架 - 浮动： vs 显示：表格单元格

Question

我曾使用过Bootstrap，并了解了Foundation。从我所见，它们都使用float:来实现响应式网格布局。

我还看到过只使用display: table-cell和@media查询来实现响应式网格布局。

后者对我来说更好，因为float:是用来实现特定排版效果的，所以将其用于实现响应式网格布局似乎有些不妥。

我的问题是：Bootstrap、Foundation和其他响应式网格布局是否使用float:来绕过旧浏览器中缺乏正确的table-cell支持？如果还有其他原因，我也想听听。

- John Anderson

---

据我所知，您可以要求Bootstrap使用堆叠（z-index）而不是float。 - TylerH

Answer 1

大致上有三种方法可以制作网格系统：float、inline-block 和 table-cell。它们都有其优缺点。Bootstrap 可能使用 float，因为作为一个框架，它能够轻松适应不同的场景。 float 方法的一个很大限制是无法垂直对齐网格元素，我个人更喜欢使用 inline-block 方法。然而，inline-block 方法带来了一个空白间隔的问题（因为网格项变成了一种单词），可以用多种方式解决，Chris Coyier 详细地解释了这个问题： http://css-tricks.com/fighting-the-space-between-inline-block-elements/ table-cell 方法的最大问题在于，你只能将网格元素放在一行中，因为你无法通过 CSS 将它们推到新的一行。这意味着对于每一行，你需要一个新的容器元素，并且对于响应式设计，它变得非常不灵活。

- gyo

---

准确来说，当Flexbox被所有浏览器支持时，这3种方法将会过时。 - gyo

您还可以查看此答案，以获取具有浮动和元素之间等边距的网格：http://stackoverflow.com/a/23352245/1811992。由于这可能变得非常复杂，因此迫不及待地等待 flexbox。 - web-tiki

关于内联块元素之间的空格，要补充一点：无论如何都应该缩小HTML文件大小，所以干脆就把所有东西放在一行里吧。 - Kalle H. Väravas

Answer 2

我同意gyo所写的一切，并且想要补充一点，我发现Pure grids（前身为YUI3 grid）是一种有效且跨浏览器友好的内联块方法应用。有趣的是，它还包含了一些前面提到的弹性盒子属性。然而，如果国际化是一个要求，那么一个重大的优势是，当设置dir="rtl"时，内联块会自动反转，而不像基于浮动的布局（不确定表格如何）。

- user3049904