Я вернулся к этому и хочу объяснить, что я нашел, было решением и чему я научился.
То есть исправление Clear остановит элементы после того, как контейнер, в котором они находятся, продолжит плавать. Это интересная проблема, которая возникает при использовании float. Однако в этой ситуации легко спутать симптом с причиной.
То, что вы видите, это элементы, div, которые «плавают» друг в друге, когда не должны, потому что они находятся в отдельных контейнерах. Предполагается, что это потому, что вы не очистили поплавок. Кроме того, существует много решений этой проблемы, которые включают добавление элемента в разметку для «очистки поплавка». Этот элемент обычно имеет «clear: both» как стиль и точку или «& nbsp»; как это содержание. Похоже, что это решает проблему, но в конечном итоге является взломать, чтобы решить другую проблему.
Настоящая проблема в том, что контейнер, в котором есть только плавающие элементы, в конечном итоге не имеет объема. Если у вас есть два контейнера, один за другим, с плавающими объектами, похоже, что плавающий объект не очищается, поскольку оба контейнера разрушаются и макет нарушается. Однако решение состоит в том, чтобы добавить свойство переполнения в контейнеры. В моем случае это было «переполнение: авто».
В «классическом» прозрачном фиксированном растворе добавьте элемент, который не имеет поплавка, и объем, чтобы контейнер, содержащий все, не разрушался и поддерживал некоторую форму объема. Однако это реальная проблема, связанная с установкой свойства переполнения.