Всех приветствую. На очереди очередная статья на тему верстки и в этот раз я рассмотрю вопрос, как в 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 серых. Но что происходит на самом деле? Вот что:
По идее мы должны увидеть серые блоке на желтом фоне, ведь они внутри блока. Но на деле стилей блока-контейнера не видно. Почему? Дело в том, что поскольку в нашем блоке только плавающие блоки, а их нормальный блок как бы не учитывает. Он схлопывается до нулевой высоты. Как решить проблему? Первый способ выглядит так:
- Добавляем новый блок с классом
clr(сокращенно отclearfix).<div id = "wrap">
<div class = "left"></div>
<div class = "right"></div>
<div class = "clr"></div>
</div> - В стилях пишем для него:
.clr{
clear: both;
}
Clear: both — это как раз то правило, которое отменяет обтекание. Таким образом в контейнере уже появится как минимум 1 нормальный блок, который будет расположен ниже плавающих и у него будет это правило. Все, проблема решена:
Второй способ
Собственно, в разных блогах я читал о многих способах отмены обтекания, в том числе и с использованием псевдоэлемента. Но самый простой, на мой взгляд, способ, который требует лишь одной строки кода, реализовывается так:
Добавляете блоку-контейнеру (в моем случае wrap) свойство overflow: hidden.
#wrap{
overflow: hidden;
}
Все, результат аналогичен, но сам способ намного проще.
Итог
Собственно, можно было бы тут писать еще про 7 способов отмены обтекания, но зачем? Берите любой из этих и используйте. Успехов в сайтостроении.