Question

在此CodePen中，rotateY元素包含<aside>元素。

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

当空间可用时，为什么元素不会与浮动的<article>并列？

<article>

section {
  width: 800px;
}

article {
  float: left;
  width: 500px;
  background: #ffffcc;
}

aside {
/*   width: 50px; */
  background: #ccffcc;
}

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>。

为什么文本环绕浮点数呢？因为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。

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

1 个答案: