clear¶

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

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

Демо¶

Позиционирование

Синтаксис¶

/* 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: Отменяет обтекание с правой стороны элемента.

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

clear: none;

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

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

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

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