概要

CSSclear プロパティは、要素が、先行するフローティング要素の隣にまわりこむか、それとも、その下に下げられる(関係が解消 (clear)される)必要があるのかを指定します。clear プロパティは、フローティング要素と非フローティング要素のどちらにも用いられます。

非フローティング要素に用いられると、その要素のボーダー境界を動かし、関係するフロートすべてのマージン境界より下になるまで下げます。この動きからはマージンの相殺は起きません。

フローティング要素に用いられると、その要素のマージン境界を動かし、関係するフロートすべてのマージン境界 よりも下に下げます。この動きはそれ以降のフロートの位置に影響しますが、これは、フロートが先行するフロートより高くに置けないためです。

clear の動作に関係するフロートは、同一のブロック整形文脈内の先行するフロートです。

注記: ある要素の内部にすべてのフローティング要素を入れたい場合には、その器もフロートにするか、または、器に置いた ::after 擬似要素に clear を使います。

#container::after { 
   content: "";
   display: block; 
   clear: both;
}

初期値none
適用対象ブロックレベル要素
継承不可
メディアvisual
計算値指定値
アニメーションの可否不可
正規順序形式文法で定義される一意のあいまいでない順序

構文

clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

clear: inherit;

none
要素は先行するフロートと切り離されず、下に移動しません。
left
要素は先行する 左の フロートと切り離され、下に移動します。
right
要素は先行する 右の フロートと切り離され、下に移動します。
both
要素は先行する 左右両方の フロートと切り離され、下に移動します。
inline-start
要素は、先行する包含ブロックの始端側のフロートの下に移動することを示すキーワードです。これは ltr 表記では左側、rtl 表記では右側のフロートです。
inline-end
要素は、先行する包含ブロックの終端側のフロートの下に移動することを示すキーワードです。これは ltr 表記では右側、rtl 表記では左側のフロートです。

形式文法

none | left | right | both | inline-start | inline-end

注記: class 属性が 'wrapper' である div は、clear プロパティの実用性をわかりやすくするためにボーダーを付加しています。

clear: left

HTML コンテンツ

<div class="wrapper">

    <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>

    <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

    <p class="left">This paragraph clears left.</p>

</div>

CSS コンテンツ

.wrapper{
    border:1px solid black;
    padding:10px;
}
.left {
    border: 1px solid black;
    clear: left;
}
.black {
    float: left;
    margin: 0;
    background-color: black;
    color: #fff;
    width: 20%;
}
.red {
    float: left;
    margin: 0;
    background-color: red;
    width:20%;
}
p {
    width: 50%;
}

clear: right

HTML コンテンツ

<div class="wrapper">

    <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>

    <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

    <p class="right">This paragraph clears right.</p>

</div>

CSS コンテンツ

.wrapper{
    border:1px solid black;
    padding:10px;
}
.right {
    border: 1px solid black;
    clear: right;
}
.black {
    float: right;
    margin: 0;
    background-color: black;
    color: #fff;
    width:20%;
}
.red {
    float: right;
    margin: 0;
    background-color: red;
    width:20%;
}
p {
    width: 50%;
}

clear: both

HTML コンテンツ

<div class="wrapper">

    <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p>

    <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>

    <p class="both">This paragraph clears both.</p>

</div>

CSS コンテンツ

.wrapper{
    border:1px solid black;
    padding:10px;
}
.both {
    border: 1px solid black;
    clear: both;
}
.black {
    float: left;
    margin: 0;
    background-color: black;
    color: #fff;
    width:20%;
}
.red {
    float: right;
    margin: 0;
    background-color: red;
    width:20%;
}
p {
    width: 45%;
}

仕様書

仕様書 策定状況 コメント
CSS Logical Properties Level 1
float and clear の定義
勧告改訂案 inline-start および inline-end を追加
CSS Level 2 (Revision 1)
clear の定義
勧告 重要な変更はないが、細部が明瞭になった
CSS Level 1
clear の定義
勧告 最初期の定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 1.0 (1.7 or earlier) 4.0 3.5 1.0
inline-start, inline-end 未サポート 45 (45) [1] 未サポート 未サポート 未サポート
機能 Android Firefox Mobile (Gecko) Firefox OS IE Phone Opera Mobile Safari Mobile
基本サポート 1.0 1.0 (1) 1.0 6.0 6.0 1.0
inline-start, inline-end 未サポート 45.0 (45) [1] 2.5 未サポート 未サポート 未サポート

[1] Nightly および Aurora (Dev edition) では、デフォルトで有効です。Release または Beta 版で有効にするには、layout.css.float-logical-values.enabledtrue に切り替えなければなりません。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss, fscholz, Sebastianz, ethertank, sosleepy
 最終更新者: yyss,