为什么固定宽度的元素不占用浮动元素旁边的 space？

Question

在此 CodePen 中，<aside> 元素包裹了 <article> 元素。

但是，如果您将宽度应用到 <aside> 元素（即取消注释 width: 50px;），<aside> 会跳转到一个新行，即使有足够的 space 与 <article> 元素并排放置。

当 space 可用时，为什么元素不与浮动的 <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>

Answer 1

使 <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> 元素的框水平拉伸以填充 <section>，完全忽略浮动的 <article>。 <aside> 中的文本环绕 <article>，而不是方框。

因此，通过给 <aside> 一个比浮动 <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> 本身不会变窄或向下移动以响应浮动？这仅仅是因为浮动将元素从流中取出。这就是 <aside> 的初始布局完全忽略 <article> 的原因。

那么，为什么文字环绕在浮动的周围？因为，就像拥有文字的目的是为了让人们阅读它一样。

我上面描述的所有内容 都包含在 section 9.5 of the spec.

中

请注意，这仅适用于 <aside> 是未建立块格式化上下文的流入块框的情况。如果你也漂浮 <aside>，显然它会紧挨着 <article>，因为这样你就有了两个漂浮物，两个漂浮物自然会排成一排。

并且如果您应用 overflow: hidden，导致 <aside> 建立块格式化上下文，那么它确实位于 [=16= 旁边]，即使它不是浮动的（事实上，这可以防止文本完全环绕浮动）：

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>

虽然浮点数本质上不会侵入其他块格式化上下文，但 overflow: hidden 导致这种情况的事实是一个不直观的副作用，它背后有一点 history。

为什么固定宽度的元素不占用浮动元素旁边的 space？

Why doesn't a fixed-width element take up the space beside a floated element?

css

css-float

fixed-width