CSS clear 属性

定義と使用法

clear 属性は、要素のどちらの側に他のフロート要素が現れないことを規定します。

説明

clear 属性は、要素のどちらの側にフロート要素が現れないことを定義します。CSS1およびCSS2では、クリア要素（即ち clear 属性が設定された要素）に自動的に上外縁マージンを追加することで実現されます。CSS2.1では、上外縁マージンに加えてクリアスペースを追加しますが、マージン自体は変更されません。どちらの変更でも、最終的な結果は同じです。左側または右側にクリアを宣言すると、要素の上外縁境界がその側のフロート要素の下外縁マージンよりも下になります。

も参照してください：

CSS チュートリアル：CSS 定位

HTML DOM リファレンスマニュアル：clear 属性

例

画像の左側と右側にフロート要素が現れることは許可されません：

img
  {
  float:left;
  clear:both;
  }

実際に試してみる

CSS グラムマ

clear: none|left|right|both|initial|inherit;

属性値

値 説明
left 左側にフロート要素を許可しません。
right 右側にフロート要素を許可しません。
both 左右両側にフロート要素を許可しません。
none デフォルト値。フロート要素が両側に現れることを許可します。
inherit 親要素から clear 属性の値を継承するべきことを規定しています。

技術的詳細

デフォルト値： none
継承性： no
バージョン： CSS1
JavaScript グラムマ： object.style.clear="left"

TIY 実例

要素の側面をクリアする
この例では、要素の側面のフロート要素をクリアする方法を示します。

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
1.0 5.0 1.0 1.0 6.0