Clear both css что это

Отмена обтекания с помощью свойства clear в CSS

Для решения такой проблемы существует специальное свойство clear , которое отменяет обтекание. Значение left отменяет обтекание слева, значение right — справа, а значение both — с обоих сторон. Это значение и используется чаще всего.

Итак, свойство clear отменяет обтекание. В нашем случае это позволит нам сделать так, чтобы плавающая картинка из первого дива не налазила на второй див.

При этом clear следует давать тому элементу, на который не должны налазить плавающие элементы, то есть в нашем случае его стоит дать второму диву.

Давайте сделаем это — дадим второму диву кроме класса parent еще и класс clearfix и для этого нового класса зададим свойство clear в значении both — налезание картинки исчезнет:

text

.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;

Применяется к блочным элементам

HTML\CSS → Как работает свойство clear в СSS

Если после float-элемента расположен элемент с clear-обтеканием, то последний опускается под float-элемент. clear:both часто используют в конструкции под названием clearfix:

div> div class="float_left">div> div class="float_rigth">div> div style="clear:both">div> div>

Это не дает родительскому блоку “схлопнуться” и float-блокам “пройти” через родительский блок, а заодно и растягивает родительский блок по высоте.

Более современный вариант clearfix выглядит так:

"clearfix"> "float_left">
 "float_rigth">
 
 . .clearfix:after< content: ''; display: table; clear: both; >

clear

Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.

Синтаксис

clear: none | left | right | both | inherit

Значения

none Отменяет действие свойства clear , при этом обтекание элемента происходит, как задано с помощью свойства float или других настроек. both Отменяет обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда требуется снять обтекание элемента, но неизвестно точно с какой стороны. left Отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом. right Отменяет обтекание с правой стороны элемента. inherit Устанавливает значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

    clear     Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.

Результат данного примера показан на рис. 1.

Применение свойства clear

Рис. 1. Применение свойства clear

Объектная модель

[window.]document.getElementById(» elementID «).style.clear

Браузеры

В браузере Internet Explorer 6 наблюдается ошибка под названием «эффект ку-ку», когда элементы c clear , соприкасающиеся с плавающими элементами (у которых задано свойство float ) могут исчезать.

В браузере Internet Explorer 7 свойство clear не действует для элементов, у которых одновременно задано float со значением, не совпадающим с clear .

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .