Почему элемент фиксированной ширины не занимает место рядом с плавающим элементом?

В этом 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>

Источник

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> в целом.

Почему текст обтекать поплавок? Поскольку весь смысл операций с плавающей точкой заключается в том, чтобы текст был обернут вокруг плавающего объекта, очень похоже на то, как смысл иметь текст вообще для того, чтобы люди могли его прочитать.

Все, что я описал выше, описано в разделе 9.5 спецификации.

Обратите внимание, что это применимо только тогда, когда <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 вызывает это не интуитивный побочный эффект, который имеет немного истории за этим.

Источник
Другие вопросы по тегам