clear CSS

Свойство clear устанавливает, с какой стороны элемента запрещено его обтекание другими элементами.

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

Свойство **`clear`** устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства [`float`](/css/float/), то `clear` отменяет его действие для указанных сторон.
Значение по умолчанию:

none

Значение по умолчанию:
`none`
Наследуется:
Нет
Применяется:

К блочным элементам

Применяется:
К блочным элементам
Анимируется:
Нет
Объект JavaScript:

object.style.clear

Объект JavaScript:
`object.style.clear`
Спецификации:
Спецификации:
* [CSS Level 2 (Revision 1)](http://www.w3.org/TR/CSS2/visuren.html#flow-control) * [CSS Level 1](http://www.w3.org/TR/CSS1/#clear)

Синтаксис

/* Keyword values */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

/* Global values */
clear: inherit;
clear: initial;
clear: unset;

Синтаксис

/* Keyword values */ clear: none; clear: left; clear: right; clear: both; clear: inline-start; clear: inline-end; /* Global values */ clear: inherit; clear: initial; clear: unset;

Значения

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

Значения

* `none` -- Отменяет действие свойства `clear`, при этом обтекание элемента происходит, как задано с помощью свойства [`float`](/css/float/) или других настроек. * `both` -- Отменяет обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда требуется снять обтекание элемента, но неизвестно точно с какой стороны. * `left` -- Отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом. * `right` -- Отменяет обтекание с правой стороны элемента.

Примеры

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>clear</title>
  <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>

Примеры

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>clear</title> <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>

Содержание

  • Синтаксис
      /* Keyword values */ clear: none; clear: left; clear: right; clear: both; clear: inline-start; clear: inline-end; /* Global values */ clear: inherit; clear: initial; clear: unset;
  • Значения
    • Примеры
        <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>clear</title> <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>

    В начало