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

时间:2017-03-11 23:27:57

标签: html css inline display

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

我想知道为什么不使用display:inline-block所有的时间I​​NSTEAD of float:left。内联块在布局方面似乎更容易控制,并且没有必须清除浮动等问题。我试图弄清楚为什么使用一个而不是另一个。

非常感谢,

艾米丽。

2 个答案:

答案 0 :(得分:4)

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



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>
&#13;
&#13;
&#13;

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

&#13;
&#13;
body {
  width:300px; 
}

.inline-block-example span {
  display:inline-block;
  width: 100px;
  border:2px dashed red;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:2)

最大的区别在于,您不需要清除内联元素,就像浮动一样。

Float从正常的DOM流中删除一个元素 - 允许内容包装它。这也意味着您需要清除标记中下一个对象的浮动,以便摆脱浮动条件。

内联块不需要您清除。