Загадка плавающего элемента без изменения размера элемента Div

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

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

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

Поэтому, если элемент уровня блока (например, .yellow div) имеет фон, он будет простираться через плавающий элемент.

Разрешение

Согласно уровню CSS 2.1, элементы с определенными свойствами (замены на уровне блока, элементы, устанавливающие новый контекст форматирования блока) не должны перекрывать поле поля любые плавающие числа в том же контексте. Добавление свойства «overflow», отличного от «visible», в элемент div .yellow предотвращает перекрытие плавающего элемента.

Когда перекрытие может быть полезно

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