Перейти к содержанию

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;

Значения

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

Значение по-умолчанию:

1
clear: none;

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

Спецификации

Описание и примеры

 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
<!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>

Комментарии