CSS レイアウト - フロートとクリア
- 前のページ CSS オーバーフロー
- 次のページ CSS フロートクリア
CSS レイアウト - フロートとクリア
CSS float この属性は、要素がどのように浮動するかを指定します。
CSS clear この属性は、クリアする要素の横にどの要素が浮動するかを指定します。
float 属性
float この属性は、例えば画像をコンテナ内のテキストに左に浮動させる位置とフォーマットを指定するために使用されます。
float 属性は以下の値のうちの一つを設定できます：
- left - 要素はコンテナの左側に浮動します
- right - 要素はコンテナの右側に浮動します
- none - 要素は浮動しません（テキスト中に最初に現れる位置に表示されます）。デフォルト値です。
- inherit - 要素は親の float 値を継承します
最も簡単な使い方は、float この属性を使うことで、（新聞などで）テキストを画像に囲む効果を達成できます。
インスタンス - float: right;
以下の例では、画像がテキストの中に右に浮動するように指定されています：
優れた Web テクノロジー教程 - 全て無料。CodeW3C.com では、必要なすべてのウェブサイト構築教程を見つけることができます。基本的な HTML から CSS、さらには進んだ XML、SQL、JS、PHP まで。
私たちのリファレンスマニュアルは、ウェブ技術のあらゆる面をカバーしています。これには、W3Cの標準技術（HTML、CSS、XML）が含まれており、JavaScript、PHP、SQLなどの他の技術も含まれています。
CodeW3C.com では、オンラインエディタを使用してこれらの例を編集し、コードを実験することができます。
例
img {
float: right;
}
インスタンス - float: left;
以下の例では、画像がテキストの中に指定された場所に表示されるように設定されています：左に向かって浮動：
優れた Web テクノロジー教程 - 全て無料。CodeW3C.com では、必要なすべてのウェブサイト構築教程を見つけることができます。基本的な HTML から CSS、さらには進んだ XML、SQL、JS、PHP まで。
私たちのリファレンスマニュアルは、ウェブ技術のあらゆる面をカバーしています。これには、W3Cの標準技術（HTML、CSS、XML）が含まれており、JavaScript、PHP、SQLなどの他の技術も含まれています。
CodeW3C.com では、オンラインエディタを使用してこれらの例を編集し、コードを実験することができます。
例
img {
float: left;
}
インスタンス - No float
以下の例では、画像はテキスト中に最初に現れる位置に表示されます（float: none;）：
優れた Web テクノロジー教程 - 全て無料。CodeW3C.com では、必要なすべてのウェブサイト構築教程を見つけることができます。基本的な HTML から CSS、さらには進んだ XML、SQL、JS、PHP まで。
私たちのリファレンスマニュアルは、ウェブ技術のあらゆる面をカバーしています。これには、W3Cの標準技術（HTML、CSS、XML）が含まれており、JavaScript、PHP、SQLなどの他の技術も含まれています。
CodeW3C.com では、オンラインエディタを使用してこれらの例を編集し、コードを実験することができます。
例
img {
float: none;
}
関連リーディング
课外書：CSS フロート
- 前のページ CSS オーバーフロー
- 次のページ CSS フロートクリア
