Очистка float

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

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

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

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Стрелки</title> <style> .arrow { font-size: 2em; /* Размер стрелок */ background: #e7e7e0; /* Цвет фона */ } .prev, .next { color: #d51920; /* Цвет стрелок */ width: 50%; /* Ширина блоков */ } .prev { float: left; } .next { float: right; text-align: right; /* Выравнивание по правому краю */ } </style> </head> <body> <div class="arrow"> <div class="prev">←</div> <div class="next">→</div> </div> <p>Текст</p> </body> </html>

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

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

Нет фоновой заливки

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

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

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

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Стрелки</title> <style> .arrow { font-size: 2em; /* Размер стрелок */ background: #e7e7e0; /* Цвет фона */ color: #d51920; /* Цвет стрелок */ overflow: hidden; /* Отменяем обтекание */ } .prev { float: left; } .next { float: right; } </style> </head> <body> <div class="arrow"> <div class="prev">←</div> <div class="next">→</div> </div> <p>Текст</p> </body> </html>

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

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

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

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

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Сдвигаем картинку</title> <style> div { border: 1px solid #000; /* Рамка */ padding: 10px; /* Поля вокруг текста */ overflow: hidden; /* Отменяем обтекание */ } .fig { float: left; position: relative; /* Относительное позиционирование */ left: -70px; /* Сдвигаем влево */ } </style> </head> <body> <div> <p><img src="image/winnie.png" class="fig" alt=""></p> <p>Винни-Пух в гостях у Кролика</p> </div> </body> </html>

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

Обрезание картинки

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

Свойство clear

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

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

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

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>clear</title> <style> section { border: 1px solid #000; /* Рамка */ padding: 10px; /* Поля вокруг текста */ } .fig { float: left; margin-right: 10px; } .clearfix { clear: both; } </style> </head> <body> <section> <p><img src="image/winnie.png" class="fig"></p> <p>Винни-Пух в гостях у Кролика</p> <div class="clearfix"></div> </section> </body> </html>

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

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

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>clear</title> <style> .col1, .col2, footer { padding: 10px; } .col1 { float: left; width: 100px; background: #E8D9A9; } .col2 { margin-left: 120px; background: #ECC0A4; } .photo { border: 1px solid #333; text-align: center; background: #fff; float: left; padding: 10px; } .clearfix { clear: both; } footer { background: #9A5044; color: #fff; clear: left; } </style> </head> <body> <div class="col1"><h3>Меню</h3><p>Лучшие фотографии</p> <p>По годам</p><p>По рейтингу</p><p>По комментариям</p></div> <div class="col2"> <figure class="photo"> <img src="image/thumb1.jpg"> <figcaption>Софийский собор</figcaption> </figure> <figure class="photo"> <img src="image/thumb2.jpg"> <figcaption>Польский костёл</figcaption> </figure> <div class="clearfix"></div> <p>Новая строка</p> </div> <footer>Подвал</footer> </body> </html>

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

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

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

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

<div class="col2"> <section style="overflow: hidden"> <figure class="photo"> <img src="image/thumb1.jpg"> <figcaption>Софийский собор</figcaption> </figure> <figure class="photo"> <img src="image/thumb2.jpg"> <figcaption>Польский костёл</figcaption> </figure> </section> <p>Новая строка</p> </div>

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

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

.clearfix::after { content: ""; /* Генерируем пустой элемент */ clear: both; /* Отменяем обтекание*/ display: block; /* Блочный элемент */ }

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

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

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>clear</title> <style> section { border: 1px solid #000; /* Рамка */ padding: 10px; /* Поля вокруг текста */ } .fig { float: left; margin-right: 10px; } .clearfix::after { content: ''; clear: both; display: block; } </style> </head> <body> <section class="clearfix"> <p><img src="image/winnie.png" class="fig" alt=""></p> <p>Винни-Пух в гостях у Кролика</p> </section> </body> </html>

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

Создайте веб-страницу, как показано на рис. 1.

Рис. 1.

Файлы

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Информация об авторе</title> <style> .author { font-family: Arial, Helvetica, sans-serif; line-height: 1.4; background: #f5f6f8; color: #333; border: 1px solid #e9eaec; border-radius: 3px; padding: 20px; text-align: right; overflow: hidden; } .author img { float: right; border: 2px solid #848994; border-radius: 50%; } .author h2 { font-weight: normal; } .author p { font-size: 0.9em; } .author h2, .author p { margin: 5px 180px 0 0; } </style> </head> <body> <section class="author"> <img src="image/shay-howe.jpg" alt="Шэй Хоу" width="150" height="150"> <h2>Шэй Хоу</h2> <p>Специализируется на дизайне и разработке интерфейсов, о чём регулярно пишет и говорит. В настоящее время является руководителем подразделения Belly. Один из организаторов таких мероприятий как Chicago Camps, Refresh Chicago и UX Happy Hour.</p> </section> </body> </html>

Создайте веб-страницу, как показано на рис. 1. Для обозначения рубля используйте символ ₽.

Рис. 1.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Заказ</title> <style> section { border: 1px solid #e9eaec; border-radius: 4px; padding: 20px; font-family: Arial, Helvetica, sans-serif; } h2, h3 { text-transform: uppercase; font-weight: normal; color: #3b4550; margin: 0; } h2 { font-size: 18px; border-bottom: 1px solid #e9eaec; padding-bottom: 10px; } h3 { font-size: 14px; } .row { overflow: hidden; border-bottom: 1px solid #e9eaec; padding: 10px 0; color: #848994; font-size: 13px; } .row:last-child { border: none; padding-bottom: 0; } .product { float: left; } .price, .total { float: right; } .total { color: #50a2de; font-size: 18px; } </style> </head> <body> <section> <h2>Ваш заказ</h2> <div class="row"> <div class="product"><h3>Продукт</h3></div> <div class="price"><h3>Цена</h3></div> </div> <div class="row"> <div class="product">Футболка</div> <div class="price">599 ₽</div> </div> <div class="row"> <div class="product">Шорты</div> <div class="price">299 ₽</div> </div> <div class="row"> <div class="product"><h3>Итого</h3></div> <div class="total">898 ₽</div> </div> </section> </body> </html>

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 31.05.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты