Отмена обтекания с помощью свойства clear в CSS
Для решения такой проблемы существует специальное свойство clear , которое отменяет обтекание. Значение left отменяет обтекание слева, значение right — справа, а значение both — с обоих сторон. Это значение и используется чаще всего.
Итак, свойство clear отменяет обтекание. В нашем случае это позволит нам сделать так, чтобы плавающая картинка из первого дива не налазила на второй див.
При этом clear следует давать тому элементу, на который не должны налазить плавающие элементы, то есть в нашем случае его стоит дать второму диву.
Давайте сделаем это — дадим второму диву кроме класса parent еще и класс clearfix и для этого нового класса зададим свойство clear в значении both — налезание картинки исчезнет:
.parent < border: 1px solid red; >.parent img < float: left; >.clearfix < clear: both; >
Название clearfix является общепринятым, поэтому в дальнейшем используйте именно его.
clear¶
Свойство clear устанавливает, с какой стороны элемента запрещено его обтекание другими элементами.
Если задано обтекание элемента с помощью свойства float , то clear отменяет его действие для указанных сторон.
Демо¶
Позиционирование
Синтаксис¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14
/* Keyword values */ clear: none; clear: left; clear: right; clear: both; clear: inline-start; clear: inline-end; /* Global values */ clear: inherit; clear: initial; clear: revert; clear: revert-layer; clear: unset; Значения¶
Отменяет действие свойства clear , при этом обтекание элемента происходит, как задано с помощью свойства float или других настроек.
Отменяет обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда требуется снять обтекание элемента, но неизвестно точно с какой стороны.
Отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом.
Отменяет обтекание с правой стороны элемента.
clear: none; Применяется к блочным элементам
Спецификации¶
- CSS Level 2 (Revision 1)
- CSS Level 1
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
html> head> meta charset="utf-8" /> title>cleartitle> style> .pull-left float: left; /* Обтекание блока по правому краю */ padding-right: 10px; > .clearfix clear: both; > style> head> body> div class="pull-left"> img src="image/figure.jpg" alt="" /> div> div class="clearfix">div> p> Бихевиоризм, как бы это ни казалось парадоксальным, просветляет сублимированный стимул, так, например, Ричард Бендлер для построения эффективных состояний использовал изменение субмодальностей. p> body> html> CSS свойство clear
Свойство clear устанавливает, должен ли элемент находиться рядом с плавающими элементами или же ниже плавающих элементов (clear).
Можно применить свойство clear к плавающим и неплавающим элементам. Имеет четыре значения — none, left, right и both. «None» — значение по умолчанию. Значение разрешает плавающие элементы с обеих сторон. Значение «left» запрещает плавающие элементы с левой стороны. Значение «right» запрещает плавающие элементы с правой стороны. Значение «both» запрещает плавающие элементы с левой и правой стороны.
| Значение по умолчанию | none |
| Применяется | К элементам блочного уровня. |
| Наследуется | Нет |
| Анимируемое | Нет |
| Версия | CSS1 |
| DOM синтаксис | object.style.clear = «both»; |
Синтаксис
clear: none | left | right | both | initial | inherit;Пример
html> html> head> title>Заголовок документа title> style> img < float: left; background: #ccc > .clear < clear: right; > style> head> body> img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png"> p class="clear">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. p> body> html>Пример со значением «left»:
Пример
html> html> head> title>Заголовок документа title> style> img < float: right; background: #ccc > .clear < clear: left; > style> head> body> img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png"> p class="clear">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. p> body> html>Пример со значением «both»:
Пример
html> html> head> title>Заголовок документа title> style> img < float: right; background: #CCC; > p.clear < clear: both; > style> head> body> img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" width="220" height="80"> p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. p> p class="clear">Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. p> body> html>Значения
| Значение | Описание |
|---|---|
| none | Разрешает плавающие элементы с обеих сторон. Значение по умолчанию. |
| left | Запрещает плавающие элементы с левой стороны. |
| right | Запрещает плавающие элементы с правой стороны. |
| both | Запрещает плавающие элементы с правой и левой стороны. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Значение элемента наследуется от родительского элемента. |
Поток документа. Свойства float и clear
В данном уроке мы расскажем о весьма важной теме, а именно о потоке HTML-документа, а также о способах управления им с помощью CSS-свойств float и clear.
Последовательность отображения элементов HTML
По умолчанию HTML-документ формируется сверху вниз, от верхнего края окна браузера по направлению к нижнему краю. Такова и очередность появления элементов веб-страницы. Порядок вывода называется потоком документа.
На скриншоте ниже — пример стандартного порядка вывода элементов:
В CSS существует несколько инструментов для управления этим потоком. Например, вы можете задавать обтекание элементов, а также вытаскивать их из общего потока. Об одном из этих инструментов — свойстве float — пойдет речь далее.
CSS float
Элемент, к которому применено свойство float, прижимается к левому или к правому краю родительского элемента (в зависимости от заданного значения), а все элементы, которые расположены ниже, поднимаются и словно обтекают данный элемент. Для лучшего понимания представьте себе камень, который обтекает вода. Собственно, именно поэтому такие элементы еще называют «плавающими».
Данное свойство широко применяется в верстке, поэтому очень важно понять его работу. Float используется для создания макетов с несколькими колонками, навигационных меню, галерей и многого другого.
Давайте рассмотрим значения, которые может принимать свойство float. Их всего три:
- left — элемент выравнивается по левой стороне. Элементы, находящиеся ниже в потоке, обтекают его с правой стороны.
- right — значение, противоположное предыдущему. Элемент выравнивается по правой стороне, а элементы, находящиеся ниже в потоке, обтекают его слева по левому краю.
- none — элемент не обтекается и находится в своей обычной позиции.
Как уже упоминалось, элемент со свойством float прижимается к левой либо правой стороне родительского элемента. Это может быть как основной контейнер веб-страницы, так и небольшой блок, скажем, сайдбар.
Применять данное свойство можно как к строчным, так и к блочным элементам. Но поскольку блочный элемент по умолчанию занимает всю ширину контейнера, то при использовании float с блоком рекомендуется задать ему ширину width и таким образом оставить место для содержимого, которое должно обходить элемент. Иными словами, необходимо дать воде возможность обтекать камень, и не перекрывать поток.
Ниже показан наглядный пример работы свойства float со значениями left и right :
Как видите, CSS позволяет легко и быстро создать макет из нескольких колонок, используя всего лишь два свойства в паре — float и width . А задать обтекание картинки текстом еще легче — мы просто применили к ней свойство float:right .
Отмена обтекания: свойство clear
В верстке практически всегда существует необходимость сбросить обтекание после определенного элемента. Например, в случае, когда основной блок веб-страницы обтекается боковой колонкой (сайдбаром), скорее всего, нам понадобится отменить обтекание после сайдбара. Ведь это определенно не последний элемент на странице, и, как минимум, есть еще футер — нижняя часть страницы, «подвал», который должен располагаться внизу, никуда не съезжать и ничего не обтекать.
Сейчас на скриншоте обтекание после сайдбара не отменено, и блок-футер ведет себя странным образом, пытаясь обтекать элемент выше (но ничего не выходит, поскольку ширина как минимум одного элемента этого сделать не позволяет — элемент «застряет»):
Как сделать сброс обтекания? В этом нам поможет свойство clear и его значения:
- left — элемент, к которому применяется свойство clear:left, перестает обтекать элемент со свойством float:left, однако правое обтекание сохраняется.
- right — элемент, к которому применяется свойство clear:right, перестает обтекать элемент со свойством float:right, однако левое обтекание сохраняется.
- both — полностью отменяет обтекание со всех сторон. Элемент смещается вниз и образовывает стандартный поток. На следующие за ним элементы обтекание также перестает влиять.
- none — отменяет очистку clear. Элемент будет вести себя, как обычно, и на него будут влиять настройки float.
Воспользуемся полученными знаниями и зададим нашему футеру свойство clear:both :
В итоге футер выровнялся и разместился на своем месте. Кстати, также стал виден результат работы свойства margin-bottom:10px , которое было ранее применено к сайдбару.
Поддержка браузерами
Свойства float и clear поддерживаются всеми использующимися браузерами, включая IE6 и IE7.