Частичная отмена float в CSS
В этой статье я решил разобрать одну проблему, которая иногда встречается при вёрстке, и при этом в Интернете найти её решение очень трудно. В этой статье мы разберём проблему частичной отмены float в CSS, а так же я Вам покажу её решение.
Итак, давайте разберём вот такой код:
<div id="left">Левые блоки</div>
<div id="right">
<img src="images/img.jpg" alt="" />
<p>Текст статьи</p>
<div style="clear: both;"></div>
<p>Автор: Иван Иванов; Раздел: CSS</p>
</div>
И CSS-код:
#left {
border-right: 5px solid #000;
float: left;
height: 400px;
width: 200px;
}
#right {
margin-left: 220px;
}
#right img {
float: left;
}
Какая была наша задача? Сделать 2 колонки: в левой колонке есть какой-то контент, в правой колонке есть статья. И у этой статьи есть картинка с float: left; (как и у левого блока). Затем мы хотим вывести блок с информацией о статье, безусловно, мы не хотим, чтобы эта информация была справа от картинки. Поэтому добавляем clear-блок. Однако, тут нас ждёт сюрприз.
Отменилось не только float: left; у картинки, но и у левого блока. Таким образом, информация о статье ушла вниз, поравнявшись с нижней границей левого блока (поскольку он выше). Как решить эту проблему? Очень просто, достаточно в блок #right добавить свойство overflow:
#right {
margin-left: 220px;
overflow: hidden;
}
Теперь всё встало на свои места. Свойство overflow отвечает за отображение того, что находится за пределами блока. И hidden сообщает, что будет отображаться лишь то, что находится внутри блока, а всё остальное будет скрыто. Именно это свойство и значение позволяет нам решить проблему с частичной отменой float в CSS.
-
Создано 17.02.2014 12:11:00
-
Михаил Русаков
Комментарии (6):
Пример неудачный - у меня что с overflow: hidden;, что без оного отображается нормально. Пробовал в IE9, Опера, FF и Хром.
Ответить
Кажется это материал из разряда "хак". Overflow это отображение внутреннего контента, а float это обтекание и позиционирование, и они вообще никак не связаны между собой. Чтобы нормально отображались колонки, нужно верстать нормальный многоколоночный макет, хотя бы так как у Мержевича: http://htmlbook.ru/layout А не заниматься сомнительными хаками.
Ответить
где ты здесь вообще хаки увидел? :D
Ответить
не очень понятно как это сработало может действительно для подписи к картинке стоило добавить отдельный блок
Ответить
Михаил, если сможете подскажите:если читать описание значения "hidden": "Отображается только область внутри элемента, остальное будет скрыто".Но в нашем случае как раз нет границы элемента, за которой все должно быть скрыто.И содержимое как раз не скрывается при "hidden", а подтягивается.Значит перевод спецификации не полный, не описываются все особенности свойства?
Ответить
можно сделать проще <div id="right"> <img src="images/img.jpg" alt="" /> <p>Текст статьи</p> </div> <p style="position: absolute; top: 400px; left: 225px;">Автор: Иван Иванов; Раздел: CSS</p>
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.