我想知道为什么不一直使用 display:inline-block 而不是 float:left 。内联块似乎在布局方面更容易控制，并且没有必须清除浮动等的问题。我试图弄清楚为什么使用一个而不是另一个。
非常感谢，
Emily.
浮动的目的是让文本环绕它。因此它被移动到左侧或右侧并从页面流中取出。包含其他文本的行框避免与浮动元素重叠。它形成了一个块级的块容器。它不与任何其他内容垂直对齐。
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
