为什么固定宽度的元素不占用浮动元素旁边的空间？答案

【问题标题】：Why doesn't a fixed-width element take up the space beside a floated element?为什么固定宽度的元素不占用浮动元素旁边的空间？
【发布时间】：2017-04-04 15:14:57
【问题描述】：

在这个CodePen 中，<aside> 元素包装了<article> 元素。

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

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

【问题讨论】：

您是否希望它在设置 50px 宽度时自动换行？我不明白你在问什么。
是的，我想知道为什么设置宽度后它不再换行。
它是因为作为一个块元素，当你不给它一个宽度时，它会占用100%的宽度，当你给它一个宽度时，它加上另一个宽度小于100%所以它不会包裹
你限制了侧边的宽度，它没有比前面的文章宽，所以它周围没有空间渲染。
好的，我明白发生了什么，但不明白为什么。你有我可以查看的更深入信息的参考吗？另外，我稍微改写了这个问题。

标签： css css-float fixed-width

【解决方案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>。包裹<article> 的是<aside> 中的文本，而不是框。

因此，通过为<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>。

那么为什么文本会环绕浮动呢？因为the entire point of floats is to have text wrap around a floating object，就像拥有文本的意义在于让人们阅读一样。

我上面描述的所有内容都在section 9.5 of the spec 中进行了介绍。

请注意，这仅适用于 <aside> 是不建立块格式化上下文的流入块框。如果你也浮动<aside>，显然它会紧挨着<article>，因为那时你有两个浮动，两个浮动自然会相互对齐。

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

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。

【讨论】：