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

Question

我想知道为什么不总是使用display:inline-block而不是float:left。在布局和不必清除浮动等方面，inline-block似乎更容易控制。我试图弄清楚为什么要使用其中之一而不是另一个。

非常感谢，

艾米丽。

- pjk_ok

---

可能是Difference Between 'display: block; float: left' vs. 'display: inline-block; float: left'?的重复问题。 - Ruhul Amin

这不是重复的问题。你提供的例子和其他类似的问题都是关于使用inline-block / block与float的。而我的问题是关于在父元素中使用inline-block而不是浮动元素。请将此问题从重复中删除。 - pjk_ok

请查看此问题：http://stackoverflow.com/q/39368992/5641669 - Johannes

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>

- Alohci

---

谢谢alohci，你的回答非常好，现在我明白了。 - pjk_ok

我理解两者都形成块级容器，但为什么浮动元素形成块级容器？是什么使它成为块级的？ - wlnirvana

Answer 2

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

浮动会将元素从正常的DOM流中移除，使内容可以围绕它换行。这也意味着您需要在标记中的下一个对象上清除浮动，以打破浮动条件。

内联块不需要您进行清除操作。

- Korgrue