Очистка 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, который при необходимости добавляется к любому элементу.

Перейти к заданиям

  • К классу block добавьте свойство overflow со значением hidden.
  • К классу block добавьте свойство background-color со значением #f7f2da.
  • К классу block добавьте сплошную рамку толщиной один пиксель и цветом #f04e23.

Правильно!

Вы правильно выполнили задачу.

Ошибка!

Задача решена неправильно.

  • Для селектора main добавьте свойство overflow со значением hidden.
  • К группе col1 и col2 добавьте свойство float со значением left.
  • К группе col1 и col2 добавьте свойство min-height со значением 100px.

Правильно!

Вы правильно выполнили задачу.

Ошибка!

Задача решена неправильно.

Очистка float 1

Создайте веб-страницу, как показано на рис. 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>

Очистка float 2

Создайте веб-страницу, как показано на рис. 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>
Автор: Влад Мержевич
Последнее изменение: 21.08.2017
Редакторы: Влад Мержевич

Рекомендуем