11:07
Автор: Рубрика: CSS-рецепты Комментариев нет

Как в css отменить обтекание (float)?

Всех приветствую. На очереди очередная статья на тему верстки и в этот раз я рассмотрю вопрос, как в css отменить обтекание. Такая проблема возникает перед разработчиком очень часто и решить ее можно как минимум несколькими способами. Сегодня я покажу 2.

Первый способ и пример

Начнем с примера. Будет один общий блок-контейнер, а в нем будут лежать 2 блока — оба плавающие. Одному задан float: left, второму — float: right. Вот html разметка:

<div id = "wrap">
<div class = "left"></div>
<div class = "right"></div>
</div>

CSS-код:

#wrap{
width: 600px;
background: yellow;
margin: 0 auto;
}
.left, .right{
background: #333;
width: 200px;
padding: 20px;
margin: 10px;
}
.left{
float: left;
}
.right{
float: right;
}

Казалось бы, мы должны увидеть в большом желтом блоке 2 серых. Но что происходит на самом деле? Вот что:
схлопывание
По идее мы должны увидеть серые блоке на желтом фоне, ведь они внутри блока. Но на деле стилей блока-контейнера не видно. Почему? Дело в том, что поскольку в нашем блоке только плавающие блоки, а их нормальный блок как бы не учитывает. Он схлопывается до нулевой высоты. Как решить проблему? Первый способ выглядит так:

  1. Добавляем новый блок с классом clr (сокращенно от clearfix).

    <div id = "wrap">
    <div class = "left"></div>
    <div class = "right"></div>
    <div class = "clr"></div>
    </div>

  2. В стилях пишем для него:
    .clr{
    clear: both;
    }

Clear: both — это как раз то правило, которое отменяет обтекание. Таким образом в контейнере уже появится как минимум 1 нормальный блок, который будет расположен ниже плавающих и у него будет это правило. Все, проблема решена:
решение

Второй способ

Собственно, в разных блогах я читал о многих способах отмены обтекания, в том числе и с использованием псевдоэлемента. Но самый простой, на мой взгляд, способ, который требует лишь одной строки кода, реализовывается так:
Добавляете блоку-контейнеру (в моем случае wrap) свойство overflow: hidden.

#wrap{
overflow: hidden;
}

Все, результат аналогичен, но сам способ намного проще.

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

Итог

Собственно, можно было бы тут писать еще про 7 способов отмены обтекания, но зачем? Берите любой из этих и используйте. Успехов в сайтостроении.

Еще материалы по CSS

Бесплатный курс по CSS

Премиум уроки по CSS

Полный практический курс по HTML5&CSS3

Комментариев нет