Просмотров: 1 174

Как сделать запрет на обтекание элементов с помощью свойства CSS clear.

В прошлом уроке мы рассмотрели основные принципы работы свойства float. Но, при использовании свойства float можно столкнуться, например, со следующей проблемой.

<img src="//webgyry.info/logo.png" style="float:left">
<p>Случайный текст. Случайный текст. Случайный текст. Случайный текст. Случайный текст. Случайный текст. Случайный текст. Случайный текст. Случайный текст. Случайный текст. Случайный текст.</p>
<div style="background:#ccc;">Блочный элемент</div>

Что произошло? Блочный элемент, который находился под элементом со свойством float:left просто поднялся наверх, на место, на котором он должен был бы находится если бы не было элемента img со свойством float left.

Как говорят в этом случае, дизайн «сломался». Так не должно быть, каждый элемент должен занимать свое место на веб-странице.

Чтобы решить эту проблему нужно поставить запрет на обтекание для блока div, который находится в самом низу.

Решение.

В CSS решить эту проблему довольно просто, нужно использовать свойство clear. Если добавить это свойство элементу, он перестает обтекаться относиться элементов, которым присвоено свойство float.

Синтаксис этого свойства следующий:

clear: none | left | right | both | inherit;

none — запрет на обтекание отсутствует

left — запрет обтекания по левой стороне

right — запрет обтекания по правой стороне стороне

both — запрет на обтекание по обоим сторонам

inherit — значение наследуется от родительского элемента

В большинстве случаев можно использовать значение clear:both, чтобы не задумываться с какой стороны нужно сделать запрет на обтекание.

<img src="//webgyry.info/logo.png" style="float:left">
<p>Случайный текст. Случайный текст. Случайный текст. Случайный текст. Случайный текст. Случайный текст. Случайный текст. Случайный текст. Случайный текст. Случайный текст. Случайный текст.</p>
<div style="background:#ccc; clear:both;">Блочный элемент</div>

Как видите, теперь блок встал на свое место и больше не подвергается действию свойства float:left для элемента img.

Свойство clear приходится довольно часто использовать на практике, когда на веб-странице используется обтекание объектов с помощью свойства float. Используйте это чтобы избежать выпадания блочных элементов из нормального потока при верстке веб-страниц.

Этот материал входит в соостав курса «Базовые приемы верстки веб-страниц»

К списку всех материалов курса. Доступ можно получить в группе вконтакте, в разделе «Ссылки».