CSS 为什么Bootstrap在.span上使用浮动而不是display:inline-block

在本文中，我们将介绍为什么Bootstrap在.span上使用浮动而不是display:inline-block。我们将探讨浮动和display:inline-block在布局中的差异，并解释为什么Bootstrap选择使用浮动。

阅读更多：CSS 教程

浮动和display:inline-block的区别

浮动和display:inline-block都是常用于CSS布局的方法。它们可以让元素在水平方向上并排显示。然而，它们之间也存在一些重要的区别。

浮动（float）

浮动是将元素从文档的正常流中移动到容器的一边。通过使用浮动，我们可以创建多栏布局或实现元素的对齐。浮动的元素会脱离文档流，导致其后的元素对其无感知，因此可能需要使用额外的CSS来清除浮动，以避免容器塌陷的问题。浮动元素的父容器会丧失高度，需要通过应用清除浮动的技术来使其具有高度。

display:inline-block

display:inline-block将元素呈现为内联元素，并保留块级属性。它的行为类似于在文本中使用标签，但它可以应用宽度、高度、外边距和内边距等块级属性。使用display:inline-block可以实现元素在水平方向上的对齐，而不需要浮动。

Bootstrap为什么使用浮动？

Bootstrap是一个流行的前端框架，用于开发响应式网页和移动应用程序。它使用网格系统来创建灵活的布局。在早期的Bootstrap版本中，开发人员选择使用浮动来实现网格系统。

历史原因

早期版本的Bootstrap是基于960格系统（960 Grid System）的。该格子系统使用了浮动来实现网格布局，因此Bootstrap也继承了这个设计决策。为了保持向后兼容性和易用性，Bootstrap一直延续了使用浮动的方式。

适应早期浏览器

此外，早期的浏览器对display:inline-block的支持并不完善。使用display:inline-block在某些旧浏览器中可能会导致布局异常或无法正常显示。为了确保在各种浏览器中具有一致的显示效果，Bootstrap选择使用浮动。

灵活性和可定制性

浮动元素可以更灵活地进行定位和调整。通过使用浮动，开发人员可以轻松地实现响应式的网页布局，根据不同的设备和屏幕大小自动调整布局。此外，使用浮动还可以更轻松地自定义和扩展Bootstrap的样式。

示例说明

让我们通过一个示例来说明Bootstrap为什么使用浮动而不是display:inline-block。

假设我们想在一个容器内创建三个等宽的栏目。我们可以使用以下代码使用display:inline-block实现：

<div class="container">
  <div class="column" style="display:inline-block; width:33.33%">Column 1</div>
  <div class="column" style="display:inline-block; width:33.33%">Column 2</div>
  <div class="column" style="display:inline-block; width:33.33%">Column 3</div>
</div>

这段代码使用display:inline-block将三个栏目呈现为内联元素，并且每个栏目都具有相同的宽度。然而，这种方法有一个潜在的问题。当栏目之间有空格或换行符时，它们之间会出现间隔，导致栏目之间的间距不均匀。

现在，让我们使用Bootstrap的浮动来实现相同的布局：

<div class="container">
  <div class="column" style="float:left; width:33.33%">Column 1</div>
  <div class="column" style="float:left; width:33.33%">Column 2</div>
  <div class="column" style="float:left; width:33.33%">Column 3</div>
  <div style="clear:both;"></div>
</div>

这段代码使用float:left将三个栏目浮动到左侧，并通过width属性设置它们的宽度为三等分。此外，我们还添加了一个用于清除浮动的空

div>元素，以确保父容器具有正确的高度。使用浮动实现的布局不会出现间距不均匀的问题，而且在各种浏览器中都能正常显示。

这个示例展示了使用浮动和display:inline-block实现相同布局的区别。虽然display:inline-block也可以实现等宽栏目的布局，但浮动在这种情况下更容易使用和控制。

总结

在本文中，我们介绍了浮动和display:inline-block在布局中的区别，并解释了为什么Bootstrap选择在.span上使用浮动而不是display:inline-block。Bootstrap选择使用浮动的原因包括历史原因、浏览器兼容性、灵活性和可定制性。浮动元素可以更灵活地进行定位和调整，并可以轻松地实现响应式的网页布局。无论是使用浮动还是display:inline-block，我们都应根据具体需求来选择适合的布局方式。