Опыт DivCSS: три практических метода CSS для очистки чисел с плавающей запятой

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

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


Как показано на рисунке перед очисткой поплавка:



1. Используйте пустые метки, чтобы очистить поплавки.

Метод, который я использую в течение долгого времени, заключается в том, что пустой тег может быть тегом div или тегом P. Я привык использовать <P>, он достаточно короткий. Многие также используют <hr>, но для него нужно просто очистить границу, но теоретически это может быть любой тег. Этот метод заключается в добавлении такого тега для очистки float после того, как все плавающие элементы внутри плавающего родительского элемента должны быть очищены, и определении для него кода CSS:clear:both. Недостатком такого подхода является добавление бессмысленных структурных элементов.


2. Используйте атрибут переполнения

Этот метод эффективно устраняет недостаток, связанный с необходимостью добавления непреднамеренного кода путем очистки чисел с плавающей запятой через пустые элементы метки. Чтобы использовать этот метод, вам нужно всего лишь определить свойство CSS: overflow:auto в элементе, который нужно очистить от плавающего, и все! «zoom:1» предназначен для совместимости с IE6.


3. Используйте после псевдообъекта, чтобы четко плавать

Этот метод применим только к браузерам, отличным от IE. Пожалуйста, обратитесь к следующим примерам для конкретных методов письма. Пожалуйста, обратите внимание на следующие моменты во время использования. 1. В этом методе для псевдообъекта, которому необходимо очистить плавающий элемент, необходимо установить высоту:0, иначе элемент будет на несколько пикселей выше фактического значения. 2. Атрибут содержимого необходим, но его значение может быть равно; пустое, синее идеальное обсуждение. В этом методе значение атрибута содержимого установлено в «.», но я обнаружил, что его также можно оставить пустым.


Как показано на рисунке после четкого плавания:


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