为啥 bootstrap 在 .span 上使用浮点数而不是 display: inline-block？

Posted 2023-03-06

【中文标题】为啥 bootstrap 在 .span 上使用浮点数而不是 display: inline-block？

【英文标题】：why bootstrap uses floats on .span instead of display: inline-block?为什么 bootstrap 在 .span 上使用浮点数而不是 display: inline-block？

【发布时间】：2012-12-17 02:54:33

【问题描述】：

我正在修改自定义网格，并想看看其他人是如何创建他们的网格系统的。由于 twitter 的 bootstrap 似乎很受欢迎，所以我查看了它的代码。现在我想知道他们为什么要使用浮点数？我会使用display: inline-block; html 元素有display: inline; 或display: block; 我会尽量避免使用浮点数。但出于某种原因，引导程序创建者决定使用浮点数。首先，我认为他们使用它们具有向后兼容性，因为 ie6 不支持 display: inline-block; 而 ie7 仅在默认情况下支持 display: inline; 的元素。但是 ie6 或多或少退出了游戏，因为他们使用 micro clearfix hack 使用 *zoom: 1;以 ie6+ IMO 为目标，他们可以复制相同的 display: inline-block; 和 *display: inline; *zoom: 1; 所以最后一个问题 为什么会在显示内联块上浮动？ 他们有没有试图解决我的问题上面没有提到？

【参考方案1】：

在语义网术语中，当我们想在文本行中放置像<img> 这样的块级元素时，应该使用display: inline-block。我们不应该使用内联布局来制作页面的主要布局。带有display: inline-block 的元素也对父元素的font-size 和line-height 等属性生效。这会降低页面布局的准确性。 在制作页面主布局时，您最好养成使用float 而不是inline-block 的习惯。

【讨论】：

感谢您的回答，但您的意思是 img 是一个内联元素，而 p 是一个块级元素，反之亦然，不是吗？:)

其实img和p都是块级元素。我更正了答案。

对不起，我的错误不是内联级元素，也不是块级元素。 img 标签默认为 inline-block。您可以像块级元素一样定义宽度和高度，但它也可以与同一行上的其他元素内联流动而不会浮动。

"带有 display: inline-block 的元素也对父元素的 font-size 和 line-height 等属性生效。" - 除非被覆盖，否则元素总是从他们的父母那里“受到影响”。我已经将 inline-block 用于布局目的 2 年没有任何问题。如果您有条件地将其设置为 IE7 的内联，则 IE7 会呈现内联块。它基本上也消除了对 .clearfix 的需求。我还没有发现使用它的任何缺点！

在语义网方面，inline-block 或 float 这样的 CSS 不会影响语义。

【参考方案2】：

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

使用内联块：

<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 是强制“行”所必需的（在浮动后消除任何正常的流程项目问题或浮动）

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

具有讽刺意味的是，表格完全可以完成所有这些（甚至是 col-heights 和垂直对齐），没有任何问题。由于内联块必须按顺序放置，这里有一个讨论的动机。

如果我们谈论的是响应式，表格会“丢失”内联块。假设您在台式机上有 4 个 cols，而您希望在平板电脑上有 2 个 cols，而在移动设备上有 1 个 cols。使用内联块，您“只是”为 cols 提供其他宽度尺寸，并且它们希望包裹得很好（注意它们折叠时的边距）。使用表格，您必须绑定到实际的行，这可能非常顽固。 Flexbox 用了很久，看起来很漂亮。您可以在某些情况下灵活调整布局。

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

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

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

【讨论】：

很好的答案！正如我首先问的那样，我不知道内联块级元素的空白敏感性，就像你一样，我喜欢使用内联块而不是浮动。我也喜欢 flexbox 的想法，但我认为我们还没有实现，浏览器供应商会花时间正确实现它，尽管 webkit 开发人员做得很好......

是的，可能需要几年时间，因为 IE8 会出现一段时间，或者有人为它编写了一个 htc 单元。今天，IE10 已经支持旧的 flexbox 语法，该语法已经被弃用。所以，是的，我们目前坚持使用浮动/内联块或表格；）

这是一个比标记为答案的答案更好的答案。它实际上有一个不使用 inline-block 的真正原因。这是一个不幸的原因，但它有一个道理。另一个答案是一个理论和学术，眼睛里戳着“......因为我这么说”。结尾。在这种情况下使用浮点数的唯一问题是它们显式关闭了使用跨度的输入元素的浮动，因此您的浮动跨度会跳到所有输入字段之前导致疼痛。

“浮动更容易，因为 div 是块元素并占据可用的水平空间” jsfiddle.net/46ahC

是的，抱歉，这确实是不正确的，我不记得确切的原因和我的意思，但我删除了该段落。

【参考方案3】：

我更喜欢使用display: inline-block; 而不是float 的网格系统，例如Pure（以前的Yahoo YUI Grid），因为它们在没有额外样式的情况下实现了国际化；将文本方向更改为从右到左，布局自动反转；花车不这样做。浮点数还引入了 clear 和其他跨浏览器的怪异需要。正如 Pure 所证明的那样，inline-block 可能超过float 的任何不准确之处都可以得到纠正。至于display: inline-block;不打算用于布局的批评，也许display: table;的使用也应该被禁止用于跨浏览器居中。我还想问语义网这个术语是否真的适用于 CSS，因为这个术语主要关注 HTML 并使用它的元素和属性来赋予机器可读的含义； CSS 的全部意义在于将语义 HTML 的样式从根本上变成人们想要的那样，因此像 CSS Zen Garden 这样的经典网站。

我的意思是，只要该技术没有利用漏洞，不会阻碍用户和设备的内容，并且得到足够的支持，那么它是可以接受的。没有理由不能以非正统但受支持的方式使用 CSS，就像 Stu Nicholls 的 CSSPlay。

有趣的是，Flexible Box 也被合并到 Pure grids 中，这是一种与现代浏览器（≥IE10 和等效浏览器）兼容的高级布局系统。