display：inline-block和float：left和有什么不一样

Question

******尽管被标记为重复-另一个问题无法回答我的问题******

我想知道为什么不总是使用display：inline-block float：left的INSTEAD。内联块似乎在布局方面更容易控制，并且不存在必须清除浮点等问题。我试图弄清楚为什么使用一种而不是另一种。

非常感谢，

艾米丽

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>

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

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>