Я пытаюсь понять аргументы за частью спецификации CSS W3C:
Почему родители плавающих элементов "рушится"?
Я нашел, что это является точкой боли для многих людей, которые пытаются изучить методы компоновки CSS. Было бы полезно уяснить, почему эта часть стандарта была настроена таким образом. Возможно, разумный вариант использования?
Примечание. Я не спрашиваю, как бороться с этим поведением, которое было подробно рассмотрено здесь: Как вы предотвращаете срывание родительских элементов?.
Взгляните на этот раздел в спецификации w3c CSS 2.1: 9.5 Floats
Обратите внимание на это изображение внизу, непосредственно перед разделом 3.5.1:
... это, по-видимому, предоставляет прецедент, который я буду делать:
Описание случая: У вас есть изображение, плавающее внутри абзаца с достаточно большой высотой, которая значительно расширяет его текст. В общем, вы хотите, чтобы текст в последующем абзаце также обернулся вокруг этого изображения. Способ достижения этого - позволить изображению выступать вне содержащего абзаца. В противном случае - если первая, содержащая высоту абзаца, распространяется до конца, чтобы обернуть изображение - последующий абзац полностью опускается ниже изображения, оставляя большое количество пробелов между текстами двух абзацев.
Однако: чаще всего мы не хотим этого эффекта при использовании float. Поэтому часто нам нужны поплавки для компоновки основных областей веб-страницы (чтобы мы не прибегали к таблицам), и в этих случаях нам обычно нужен контейнер для расширения, чтобы включить то, что находится внутри в расчете высоты.
Мое желание: Кажется, что должно существовать свойство CSS по строкам:
box-model-height: [ include-floats | exclude-floats ];
Браузеры могут иметь по умолчанию абзацы как "exclude-floats", а все остальные блоки - "include-floats".
Или если это сломает слишком много проектов, "exclude-floats" может быть по умолчанию повсеместно, и мы все равно можем исправить ситуацию, где нам нужно, целиком в стиле-листе, вместо того, чтобы требовать имя класса (например, clearfix) в разметке.
Потому что в них ничего нет. Элемент с плавающей точкой не занимает места в памяти этого родителя, поэтому родитель считает его пустым и ведет себя соответствующим образом.
поскольку, как только вы назначаете свойство float, он становится частью модели поля, у которой нет заданного свойства, поэтому вам нужно определить ширину и высоту или минимальную высоту: