CSS: float

概略

• MDN: CSS float

float は p タグや figure タグなどのブロック要素を左右に並べるときに使用します。 CSS flex がなかった時代には目次やコンテンツなど大きな部品のレイアウトでも float を使っていましたが、 現在では flex を使用した方が簡単になる話が多いです。
CSS: flex

文章と画像を左右に並べ、 文章は画像の下側に回り込ませるような用途では現在でも float を使います。 flex ではこのようなことはできません。

基本的なサンプル

float の解除

float を使用した場合は適切な場所で float の解除が必要です。 float の状態を引き継いだまま放置すると後のコンテンツの配置に影響を与えます。

float の解除には以下の方法があります。

1. 適当なタグ (br, divなど)を入れて clear: both; を設定する。

   <style>
   .clearfix {
   	clear: both;
   }
   </style>
   
   <div class="clearFix"></div><!-- float を解除する。 -->
   

2. CSS の ::after で解除する方法もあります。

float を指定すると span も img も ブロック要素になります

重要事項で、要素に float を指定すると img (画像) などのインラインブロック要素や a (リンク), b (太文字), span などのインライン要素も 暗黙のうちにブロック要素 (display: block;) になります。 ということで div を float で配置するのと同じ話になります。
CSS: display: inline; インライン要素

サンプルいろいろ

figure タグで画像を並べる

li タグを左右に並べる

li タグを左右に並べる話も div や figure と同じです。
ul,ol,li タグ

(昔話) float でレイアウトが崩れる場合がある

CSS の指定の仕方がまずいとレイアウトが崩れて変な表示になることがあります。 float を初めて眺めたときに混乱しやすい話でした。 その後、flex が登場し float があまり使われなくなった理由です。

現在は CSS flex があるので、大きなブロックの配置で float を使わない方が良いです。

• TestHTML_div_float_width01.html
  div の最小幅 (min-width)と最大幅 (max-width) を設定。
  

(昔話) float で2段組レイアウト

こちらは昔話で参考程度です。 CSS flex が出てくる前の時代には CSS float で 2段組みを作る方法がありました。 仕組みが複雑なので現在では大きなレイアウトで使いません。 現在では flex で簡単に 2段組みが作れます。
HTML ページレイアウト
CSS: flex

関連

• CSS display: inline,block など
• CSS flex
• CSS position: absolute;
• CSS: 要素の配置: 左右中央, 上下中央