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

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

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

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

Пример здесь

 .inline { float:left; } .yellow { background-color:yellow; } 
 
first line
second line
third line
floated div

EDIT: Я ожидаю, что код выше выглядит примерно так, но без явной необходимости использовать поля.

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

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

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

9.5 Поплавки

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

Это означает, что элементы уровня блока (такие как

,

, …) – они не расположены – игнорируют float, тогда как линейные поля текут вдоль его стороны.

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

Наложение перекрытий CSS [D]

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

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

Решение

Из спецификации CSS 2.1 :

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

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

ПРИМЕР ЗДЕСЬ

 .yellow { overflow: hidden; } 

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

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

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

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

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

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

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

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

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

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

CSS:

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

смотреть скрипку

  • Как горизонтально центрировать плавающий элемент переменной ширины?
  • Сделать дочерний элемент видимым вне переполнения: скрытый родитель
  • Расширение родительского контейнера с высотой 100% для учета плавающего содержимого
  • CSS-контейнер div не получает высоту
  • Как создать вид сетки / плитки?
  • Давайте будем гением компьютера.