display: inline-block 和 float: left 有什么区别

Question

我想知道为什么不一直使用 display:inline-block 而不是 float:left。内联块在布局方面似乎更容易控制，而且在必须清除浮动等方面没有问题。我想弄清楚为什么使用一个而不是另一个。

非常感谢，

艾米丽。

Answer 1

浮动的目的是让文本环绕它。所以它被移动到左侧或右侧并从页面流中取出。包含其他文本的行框则避免与浮动元素重叠。它形成了一个块级的块容器。它没有与任何其他内容垂直对齐。

body {
  width:300px; 
}
.float-example span {
  float:left;
  width: 100px;
  border:2px dashed red;
}

<section class="float-example">Lorem ipsum dolor sit amet, consectetur 
adipiscing elit, <span>I like to use float!</span> sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</section>

inline-block 的目的是成为一个位于行框内的块容器。它在正常的内容流中形成一个内联级块容器。它与它所在的行框的其他内容垂直对齐。

body {
  width:300px; 
}

.inline-block-example span {
  display:inline-block;
  width: 100px;
  border:2px dashed red;
}

<section class="inline-block-example">Lorem ipsum dolor sit amet, consectetur
adipiscing elit, <span>I like to use inline-block!</span> sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</section>

Answer 2

最大的区别是您不需要像清除浮动元素那样清除内联元素。

Float 从正常的 DOM 流中移除一个元素 - 允许内容将其包裹起来。这也意味着您需要清除标记中下一个对象的浮动，以打破浮动条件。

Inline-block不需要你清除。

display: inline-block 和 float: left 有什么区别

What is the difference between display: inline-block and float: left

html

css

inline

display