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

问题

In this CodePen, the <aside> element wraps the <article> element.

But if you apply a width to the <aside> element (i.e. uncomment width: 50px;), the <aside> jumps to a new row, even though there is enough space to sit alongside the <article> element.

Why doesn't the element sit alongside a floated <article> when space is available?

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>

回答1:

Making the <article> semitransparent reveals what is actually happening when the width of the <aside> is auto:

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>

That's right: the <aside> element's box stretches horizontally to fill the <section>, disregarding the floating <article> altogether. It's the text within the <aside> that wraps around the <article>, not the box.

So by giving the <aside> a width that is much less than that of the floating <article>, there is in fact no room for the text to sit next to the <article>! This results in the text moving downward instead, since text will always prefer flowing downward to overflowing horizontally. This actually causes the <aside> element's box to increase in height, which can be seen when, again, you make the <article> semitransparent:

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>

So why doesn't the in-flow <aside> box itself become narrower or shift downward in response to the float? That's simply because floating takes an element out of the flow. And that's why the initial layout of the <aside> disregards the <article> altogether.

Why does the text wrap around the float, then? Because the entire point of floats is to have text wrap around a floating object, much like how the point of having text at all is for people to read it.

Everything I've described above is covered in section 9.5 of the spec.

Note that this only applies when the <aside> is an in-flow block box that doesn't establish a block formatting context. If you float the <aside> too, obviously it will sit right next to the <article>, since then you have two floats, and two floats will naturally line up with one another.

And if you apply overflow: hidden, causing the <aside> to establish a block formatting context, then it does sit next to the <article>, even though it's not floating (in fact, this prevents the text from wrapping around the float altogether):

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>

While floats never intrude into other block formatting contexts by nature, the fact that overflow: hidden causes this is an unintuitive side effect that has a bit of history behind it.

来源：https://stackoverflow.com/questions/43211208/why-doesnt-a-fixed-width-element-take-up-the-space-beside-a-floated-element

标签

css

css-float

fixed-width