float プロパティにより後続要素を回りこませる

CSS の float プロパティには次のような値を指定することができます。

float: none;   /* デフォルト */
float: left;   /* フローティングボックスを構成して左端に配置 */
float: right;  /* フローティングボックスを構成して右端に配置 */

float プロパティに left を設定すると、その要素は左端に表示され、後続の要素はその反対側（この場合は右側）に回り込んで表示されるようになります。

float を指定しない場合

float: left を指定した場合

フローティングボックスの形成

float プロパティに left や right を設定した場合、その要素は フローティングボックス を形成します。 後続の要素は、フローティングボックスが存在しないとして配置されるので、横幅いっぱいのサイズが確保されます。 下記の例は、後続要素に青色の背景色を付けたサンプルです。

後続要素の横幅は、フローティングボックスに重なる形で画面いっぱいのサイズになっていることが分かります。 この場合でも、実際に表示されるテキストは重ならないように考慮して描画されることになっています。

フローティングボックスの回りこみの解除 (clear)

フローティングボックスの後続の要素は、フローティングボックスに対して回りこむように配置されていきます。 その回りこみを解除して、新しい段落に表示したい場合は、clear プロパティを指定します。

clear: none;   /* 回りこみを解除しない（デフォルト） */
clear: left;   /* 左側のフローティングボックスへの回りこみを解除 */
clear: right;  /* 右側のフローティングボックスへの回りこみを解除 */
clear: both;   /* 全てのフローティングボックスへの回りこみを解除 */

clear を指定しない場合

clear: left; を指定した場合

CSS の float プロパティは、この clear 指定を後続の要素に対して指定する必要があるため、レイアウトが難しくなってしまうという欠点があります。 段組を構成したい場合は、CSS3 のグリッドレイアウトやマルチカラムの仕組みを使うことで、よりシンプルにレイアウトを作成することができます。

連続するフローティングボックス

float:left を連続して配置

float: left; を設定した要素を連続して配置すると、それら全てのフローティングボックスを回りこむように後続の要素が配置されます。

float:left と float:right を配置

float プロパティを left に設定した要素と、right に設定した要素を連続して配置すると、それぞれ左側と右側にフローティングボックスが配置されます。

この構成は、昔はサイトヘッダーやサイドバーの表示のためによく使われましたが、現在では代わりにフレックスボックスレイアウトが使われることが多くなっています。