В этом материале я решил разобрать одну проблему, которая иногда встречается при вёрстке, и при этом в Интернете найти её решение очень трудно. В этом материале разберём проблему частичной отмены 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.
