Очистка float

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

Ширина элементов

Если обтекаемые элементы будет занимать всю доступную ширину, то остальные элементы, следующие за ними, будут начинаться с новой строки. Для этого суммарная ширина элементов должна равняться 100%. В примере 1 показано создание стрелок на одной строке.

Пример 1. Использование width

Каждый блок со стрелкой теперь занимает ширину 50% и в сумме они дают 100% ширины, поэтому абзац, идущий после arrow, начинается с новой строки.

Данный метод применяется редко, поскольку не всегда можно явно указать ширину элементов, к тому же метод не решает проблему с высотой блока и его фоном (рис. 1).

Рис. 1. Нет фоновой заливки

Использование overflow

Свойство overflow управляет отображением содержимого блока, если оно целиком не помещается и выходит за область заданных размеров. Значение auto, в частности, добавляет полосы прокрутки при необходимости, а hidden отображает только область внутри элемента, остальное скрывает. Кроме этого, использование overflow со значением auto, scroll или hidden отменяет действие float (пример 2).

Пример 2. Применение overflow

Результат после применения свойства overflow сразу меняется (рис. 2).

Рис. 2. Влияние свойства overflow на фон

overflow — одно из самых популярных свойств, работающее в связке со свойством float. Но иногда возникают ситуации, когда применение этого метода недопустимо. Это происходит в тех случаях, когда элемент выходит за пределы блока, при этом он будет «обрезан». В примере 3 картинка сдвигается влево от своего исходного положения.

Пример 3. Обрезание области элемента

Результат примера показан на рис. 3.

Рис. 3. Обрезание картинки

Свойство clear

Для отмены действия float от вышестоящего элемента применяется свойство clear со следующими значениями:

• left — отменяет действие значения left у float;
• right — отменяет действие значения right у float;
• both — одновременно отменяет действие значений left и right у float. Это значение рекомендуется устанавливать, когда требуется отменить обтекание элемента, но неизвестно точно с какой стороны.

Чтобы отменить действие обтекания, свойство clear надо добавлять к элементу, идущему после элемента с float. Обычно вводят универсальный класс, к примеру, clearfix и вставляют пустой <div> с этим классом (пример 4).

Пример 4. Использование clear

В данном примере для класса clearfix установлено свойство clear со значением both.

Использование clear является одним из самых популярных в вёрстке в силу простоты и универсальности. Но иногда возникают комбинации, в которых использование clear даёт сбой. Это происходит, когда в коде встречается одновременно несколько разных обтекаемых элементов. Так, в примере 5 с помощью float создаются две колонки, а в правой колонке float упорядочивает фотографии.

Пример 5. Использование clear

Результат примера показан на рис. 4. Свойство clear действует не только на класс photo, но и на класс col1, т. е. на все элементы выше, у которых установлено float. Поэтому «Новая строка» начинается не сразу же после фотографий, а после завершения левой колонки.

Рис. 4. Ошибка с отображением строки

В подобных ситуациях помогает комбинация разных методов. Так, фотографии можно добавить в контейнер с overflow и удалить clearfix. Колонка приобретёт следующий вид.

Псевдоэлемент ::after

Частое включение пустого элемента <div> со свойством clear захламляет код, особенно при активном использовании свойства float. Логично перенести всё в стили, избавившись от лишних элементов. Для этого воспользуемся псевдоэлементом ::after, который в комбинации со свойством content добавляет пустой текст после содержимого элемента. К такому тексту можно применить стилевые свойства, в частности clear.

Вместо значения block у display иногда вставляют значение table, но смысл это не меняет, так же как и набор других возможных свойств. Их задача — создать невидимый блок, который будет отменять действие float у вышестоящих элементов.

Поскольку текст, генерируемый через псевдоэлемент ::after, располагается после содержимого элемента, он с лёгкостью заменяет конструкцию <div class="clearfix"></div>. Там, где она требуется достаточно только добавить класс clearfix, как показано в примере 6.

Пример 6. Псевдоэлемент ::after

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