Почему CSS float не меняет ширину следующего div?

Как я понимаю float:left, он будет перемещать следующий элемент влево, а не в новую строку.

В следующем примере я бы ожидал, что второй div будет справа от первого div, но, как вы можете видеть в jsfiddle ниже, он по-прежнему охватывает всю ширину.

Содержание, с другой стороны, волшебным образом начинается там, где оно должно быть. Использует ли правило float только содержимое, но не поля?

Пример здесь

.inline {
    float:left;
}

.yellow {
    background-color:yellow;
}
<div class="inline">
    first line<br>
    second line<br>
    third line<br>
</div>

<div class="yellow" >floated div</div>

Ответы

Ответ 1

Это ожидаемое поведение позиционирования поплавка.

Когда элемент перемещается влево (в вашем случае .inline div), следующее содержимое стекает по правой стороне этого элемента, строки строк сокращаются, НО ширина содержащий блок, который устанавливается следующим элементом (в вашем случае .yellow div) зарезервировано.

Это описано в спецификации:

9.5 Поплавки

Поскольку float не находится в потоке, заблокированные блокировкидо и после потока флоат-боксов вертикально, как , если поплавок не существуют.Тем не менее, текущие и последующие строки строк, созданные рядом с поплавок сокращается по мере необходимости, чтобы освободить место для поля поля поплавка.

Это означает, что элементы уровня блока (такие как <div>, <p>,...) - они не расположены - игнорируют float, тогда как линейные поля текут вдоль его стороны.

Пример, приведенный W3C:

CSS float overlapping[D]

Поле IMG перемещается влево. Ниже следует содержание отформатированный справа от поплавка, начиная с той же строки, что и плавать. Строковые поля справа от поплавка сокращаются из-за наличие поплавка, но возобновить их "нормальную" ширину ( содержащий блок, установленный элементом P) после поплавка.

Следовательно, если вы дадите элементу .yellow фон, вы увидите, что он охватывает контейнер и продолжается через плавающий элемент.

Решение

От Уровень 2.1 CSS:

Граница поля таблицы, элемент замещения на уровне блока или элемент в нормальном потоке, который устанавливает новое форматирование блока контекст (например, элемент с "переполнением", отличный от "видимого" ), должен не перекрывать поле поля любых поплавков в том же форматировании блока контекст в качестве самого элемента.

Следовательно, если вы добавите свойство overflow со значением, отличным от visible, в div .yellow, это предотвратит перекрытие div от плавающего элемента:

ПРИМЕР ЗДЕСЬ

.yellow {
    overflow: hidden;
}

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

Если он был ограничен по умолчанию, содержимое не будет продолжено под элементом с плавающей точкой.

Ответ 2

Вам нужно также плавать желтый div, тогда он будет работать;

.inline {
    float:left;
}

.yellow {
    background-color:yellow;
    float: left;
}

Однако только плавающие элементы не помещают его слева от следующего элемента автоматически, поэтому вам нужно display: inline-block;, чтобы показать следующий div в той же строке и display: block;, чтобы показать снизу.

Вы также должны указать ширину (в процентах, если хотите) для обоих div, которые добавляют до 100% или менее , включая любые левые и правые поля и отступы, если отображаются в строке.

Другое, что вы могли бы сделать, это установить ширину для .inline и поместить ее, а затем дать .yellow то же значение, что и его левое поле, и не плавать.

.inline {
    float:left;
    width:50px;
}

.yellow {
    background-color:yellow;
    margin-left:50px;
}

Это позволит .yellow div заполнить оставшуюся ширину.

Надеюсь, что это поможет.

Ответ 3

CSS

.inline {
    float:left;
    position:relative;
    width:auto
}

.yellow {
    background-color:yellow;
    position:relative;
    float:left;
}

см. скрипку