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

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

Комментарии