CSS フロート

浮動フレームは左または右に移動し、その外边缘が含まれるフレームまたは他の浮動フレームのエッジにぶつかるまで移動します。

浮動フレームはドキュメントの通常のフロウに存在しないため、通常のフロウのブロックは浮動フレームが存在しないかのように振る舞います。

CSS フロート

以下の図をもう一度見てください、フレーム1を右に浮動すると、ドキュメントフロウから離れ、右に移動し、その右边缘が含まれるフレームの右边缘にぶつかるまで移動します：

CSS フロートインスタンス - 右にフロートする要素

以下の図をもう一度見てください、フレーム1が左に浮動すると、ドキュメントフロウから離れ、左に移動し、その左边缘が含まれるフレームの左边缘にぶつかるまで移動します。それがドキュメントフロウから離れたため、スペースを占めず、実際にはフレーム2を覆い、フレーム2が視界から消えます。

すべての3つのフレームを左に移動すると、フレーム1は左に浮動し、含まれるフレームにぶつかるまで左に浮動し、他の2つのフレームも左に浮動し、前の浮動フレームにぶつかるまで左に浮動します。

CSS フロートインスタンス - 左にフロートする要素

以下の図のように、含まれるフレームが水平に並んだ3つの浮動要素を収容できないほど狭い場合、他の浮動ブロックは下に移動し、十分なスペースがあるまで下に移動します。浮動要素の高さが異なる場合、下に移動すると他の浮動要素によって「塞がれる」可能性があります：

CSS フロートインスタンス 2 - 左にフロートする要素

CSS float 属性

CSSでは、float属性を使用して要素の浮動を実現します。

float属性に関する詳細については、リファレンスマニュアルを訪れてください：CSS float 属性。

行フレームとクリーンアップ

浮動フレームの隣の行フレームが短くなり、浮動フレームにスペースを残すため、行フレームが浮動フレームの周りに囲みます。

したがって、浮動フレームを作成することで、テキストが画像の周りに囲まれることができます：

行フレームがフロートフレームを囲む

行框を浮動フレームの周りに囲まれないようにするには、そのフレームに適用する必要があります。 clear属性。clear属性の値はleft、right、both、またはnoneであり、それがどの辺がフロートボックスに触れないようにするかを示します。

この効果を実現するために、クリーンアップされた要素の上マージン上に十分なスペースを追加し、要素の上端がフロートボックスの下に垂直に落ちるようにします：

clear 属性インスタンス - 行フレームに clear を適用

これは役立つツールであり、周囲の要素がフロート要素にスペースを確保します。

フロートとクリーンアップについてもっと詳しく見てみましょう。画像をテキストブロックの左側にフロートさせ、画像とテキストが背景色とボーダーを持つ別の要素に含めたい場合、以下のようなコードを書くかもしれません：

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

この場合、問題が発生します。フロート要素がドキュメントフローから外れたため、画像やテキストを囲むdivは空間を占めません。

どうすれば囲む要素が視覚的にフロート要素を囲むことができますか？この要素の中のどこかでclearを適用する必要があります：

clear 属性インスタンス - 空要素にクリーンアップを適用

しかし、新しい問題が発生しました。クリーンアップを適用できる既存の要素がありませんので、空の要素を追加してクリーンアップする以外に選択肢はありません。

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.clear {
  clear: both;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

これにより、私たちが望む効果が得られますが、余分なコードが必要です。多くの要素にはclearを適用できますが、時にはレイアウトのために意味のないマークアップを追加することが避けられません。

ただし、別の方法もあります。それは、コンテナdivに対してフロートを行うことです：

.news {
  background-color: gray;
  border: solid 1px black;
  float: left;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

これにより、私たちが望む効果が得られます。しかし、次の要素はこのフロート要素に影響されます。この問題を解決するために、誰かはレイアウト中のすべてのものに対してフロートを行い、意味のある要素（よくはサイトのフッター）を使用してこれらのフロートをクリーンアップすることを選択します。これにより、不必要なマークアップを減少または排除することができます。

実際には、CodeW3C.comサイトのすべてのページがこの技術を使用しています。CSSファイルを開くと、私たちがフッターのdivに対してクリーンアップを行い、フッターの上にある3つのdivが左にフロートしていることを確認できます。

CSS clear 属性

私たちがCSSのクリーンアップの原理とclear属性の適用方法について詳細に議論したことをお話ししました。clear属性に関するより多くの知識を学びたい場合は、以下のリファレンスマニュアルにアクセスしてください：CSS clear 属性。

フロートとクリアインスタンス

float 属性の簡単なアプリケーション
段落の右側にフロートさせる画像
枠と境界を持つ画像を段落の右側にフロートさせる方法
段落の右側にフロートさせる画像に枠と境界を追加します。
タイトル付きの画像を右側にフロートさせる方法
タイトル付きの画像を右側にフロートさせます。
段落の最初の文字を左側にフロートさせる方法
段落の最初の文字を左側にフロートさせ、その文字にスタイルを追加します。
水平メニューを作成する方法
一つのサイドバーを持つフロートを使用して水平メニューを作成します。
テーブルのないホームページを作成する方法
ヘッダー、フッター、左側の目次、主体内容を持つホームページを作成するためにフロートを使用します。
クリア要素の側面
この例では、フロート要素の側面をクリアする方法を示します。