在此CodePen ，<aside>元素包裹 <article>元素。
但是如果您将宽度应用于 <aside>元素(即取消注释 width: 50px; )， <aside>跳到新行，即使有足够的空间可以坐在 <article> 旁边元素。
为什么该元素不位于 float <article> 旁边什么时候有可用空间？
section {
width: 800px;
}
article {
float: left;
width: 500px;
background: #ffffcc;
}
aside {
/* width: 50px; */
background: #ccffcc;
}<body>
<section>
<article>[[Text]]</article>
<aside>[[Text]]</aside>
</section>
</body>最佳答案
制作 <article>半透明揭示了当 <aside> 的宽度时实际发生的情况。是自动的:
section {
width: 800px;
}
article {
float: left;
width: 500px;
background: #ffffcc;
opacity: 0.5;
}
aside {
/* width: 50px; */
background: #ccffcc;
}<body>
<section>
<article>[[Text]]</article>
<aside>[[Text]]</aside>
</section>
</body>没错:<aside>元素的框水平拉伸(stretch)以填充 <section> ，忽略 float <article>共。这是 <aside> 中的文本环绕 <article> ，而不是盒子。
因此，通过给出 <aside>宽度远小于 float <article> ，实际上没有空间可以让文本位于 <article> 旁边。 !这会导致文本向下移动，因为文本总是更喜欢向下流动而不是水平溢出。这实际上导致 <aside>元素框的高度增加，当您再次创建 <article> 时可以看到这一点。半透明:
section {
width: 800px;
}
article {
float: left;
width: 500px;
background: #ffffcc;
opacity: 0.5;
}
aside {
width: 50px;
background: #ccffcc;
}<body>
<section>
<article>[[Text]]</article>
<aside>[[Text]]</aside>
</section>
</body>那么为什么没有流入 <aside>盒子本身会因 float 而变窄或向下移动？这只是因为 float 从流中取出了一个元素。这就是 <aside> 的初始布局的原因忽略<article>总共。
那么为什么文本会环绕 float 呢？因为the entire point of floats is to have text wrap around a floating object ，就像拥有文本的意义在于人们阅读它一样。
我上面描述的所有内容都包含在section 9.5 of the spec中.
请注意，这仅适用于 <aside> 时是一个流入 block 框，不建立 block 格式化上下文。如果 float <aside>同样，显然它会位于<article>旁边。 ，这样你就有了两个花车，两个花车自然会排成一排。
如果您申请 overflow: hidden ，导致<aside>建立 block 格式化上下文，那么它确实位于 <article> 旁边，即使它不是 float 的(事实上，这可以防止文本完全围绕 float ):
section {
width: 800px;
}
article {
float: left;
width: 500px;
background: #ffffcc;
}
aside {
width: 50px;
background: #ccffcc;
overflow: hidden;
}<body>
<section>
<article>[[Text]]</article>
<aside>[[Text]]</aside>
</section>
</body>虽然 float 本质上不会侵入其他 block 格式化上下文，但事实上overflow: hidden导致这是一个不直观的副作用，有一点 history就在它后面。
关于css - 为什么固定宽度元素不占用 float 元素旁边的空间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43211208/