twitter-bootstrap - 为什么 bootstrap 在 .span 上使用 float 而不是显示 : inline-block?

Question

我正在修补自定义网格，想看看其他人是如何创建他们的网格系统的。因为 twitter 的 bootstrap 似乎很受欢迎，所以我查看了它的代码。现在我想知道他们为什么使用 float ？我会使用display: inline-block; html 元素有display: inline; 或display: block; 我会尽量避免 float 。但出于某种原因，bootstrap 的创建者决定使用 float 。首先，我认为他们使用它们是为了向后兼容，因为 ie6 不支持 display: inline-block; 并且 ie7 默认只支持带有 display: inline; 的元素.但是 ie6 或多或少地退出了游戏，因为他们使用 micro clearfix hack它使用 *zoom: 1;为了针对 ie6+ IMO，他们可以使用 *display: inline; 复制相同的 display: inline-block; *zoom: 1; 那么最后一个问题是为什么 float 在显示内联 block 上？ 他们是否试图解决我上面没有提到的任何问题？

Answer 1

内联 block 是空白感知的，具有实际内容的自动宽度，并按照它们在 HTML 中的顺序堆叠。 float 不是，但需要一个 clearfix 方法并且基于 block 元素。这些元素在水平可用空间上具有自动宽度。纯粹语义上，内联 block 的语义较少，因为空白感知格式和顺序的重要性。但纯粹从功能的 Angular 来看，两者都不是为网格而设计的。如果不是伪 CSS，我们也会有非语义的 HTML 标签 clearfixe。所以我认为他们都不是赢家。但在未来几年 flexbox 将成为强制性要求时，暂时没有其他选择。

使用内联 block :

<div>
    <div style="display:inline-block; width:30%;">col1
    </div><div style="display:inline-block; width:70%;">col2</div>
</div>

标签必须粘在一起/附加，以消除任何间距。容器 div 是强制元素成为单独行的一部分所必需的。

有花车:

<div class="clearfix">
    <div style="float:left; width:30%;">col1</div>
    <div style="float:left; width:70%;">col2</div>
</div>

Clearfix 是强制“行”所必需的(消除任何正常的流程元素问题或 float 之后的 float )

使用其中一种取决于您的目标(和品味)。我必须说我更喜欢行内 block 而不是 float ，只要您知道两个列的宽度或使用相对大小 (%)。我认为它比带有 clearfix 的 float 更直观和可预测，如果按照它应该如何使用它甚至不是问题的问题的修复“。只有内联 block 的空白意识迫使你使用一些时髦的 html ，这是一个缺点。

具有讽刺意味的是，表格完全可以做到这一切(甚至列高和垂直对齐)，没有任何问题。由于行内 block 必须按顺序放置，因此有讨论的动机。

如果我们谈论的是响应式，表格会“丢失”行内 block 。假设您在台式机上有 4 个列，您希望平板电脑上有 2 个列，手机上有 1 个列。使用内联 block ，您“只需”为列提供其他宽度尺寸，并且它们有望很好地包裹(在折叠时注意边距)。使用表格，您将绑定(bind)到实际的行，这可能非常顽固。 Flexbox 被长期需要，看起来很漂亮。您可以根据特定情况灵活调整布局。

Bootstrap 可以很方便地了解他们是如何做某事的。刚读到 3.0，他们正在使用相对网格大小。这给嵌套网格和对齐带来了问题。

----  --a-  ----  ----
---b------
....  ..c.

A 列是一个普通的父列。 Col c 是 b 的子嵌套 col。很难将 c 与 a 与相对大小对齐，因为装订线对于容器是可变的，除非您使用填充和边框模型。但那样你会失去很多灵 active 。当您希望 col 具有一些背景和填充时，您会搞乱网格系统，因此您必须使用您设置样式的容器，这会使代码困惑。我还没有研究他们是否找到了解决方案。我还没有。我使用了固定像素，但这意味着在响应式设计中你只能有几个固定宽度，并且对于移动设备周围的所有内容都使用相对网格。