Перекрывающееся отделение CSS

От спецификации:

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

Это означает элементы с display: block это не расположено, игнорируют плавание.

Однако поля строки, созданные рядом с плаванием, сокращены для создания места для граничного поля плавания.

Это означает, что встроенные элементы действительно текут вокруг плаваний. Вот почему Ваш <span> и текст в <p> потоки вокруг div.left, даже при том, что <p> и div.right не делать.

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

И, это - тупой, как это - является решением Вашей проблемы. Необходимо вставить "новый контекст форматирования блока".

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

Самый легкий из них для Вас is1:

div.right { overflow: auto; }

Обратите внимание что Вы, вероятно, также want1:

div.comment { overflow: auto; }

Решить связанную, но другую проблему. Если Ваш <p> содержание короче, чем Ваше изображение, затем пущенный в ход div.left не развернет высоту div.comment. Добавление overflow: auto; берет Вас в точно именованную Сложную часть Случаев спецификации:

Если [Блочный уровень, незамененные элементы в нормальном потоке, когда 'переполнение' не вычисляет к 'видимому'] элемент, имеют каких-либо плавающих потомков, край нижнего поля которых ниже нижней части, то высота увеличена для включения тех краев

Который в основном говорит, что плавания только расширяются overflow <> visible содержа элементы.

1 overflow: hidden; также работал бы, но обрежет содержание вместо того, чтобы бросить полосы прокрутки в случае необходимости.

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

Или это или плавание другой элемент блочного уровня.

div.right { float: left; width: 482px; }