【CSS Modules】floatプロパティの使い方
floatプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
floatプロパティは、要素を左右のどちらかに寄せて配置し、テキストや他のコンテンツがその周りを回り込むように制御するプロパティです。主に画像とテキストのレイアウトにおいて、画像を文章の途中に挿入し、文章が画像の周りを流れるような効果を実現するために使用されてきました。かつては、Webページの多段レイアウトを作成する際にも利用される主要な手段の一つでした。
このプロパティにleftを指定すると、要素は親要素の左端に寄せられ、後続のコンテンツは要素の右側を回り込みます。rightを指定すると、要素は親要素の右端に寄せられ、後続のコンテンツは要素の左側を回り込みます。none（既定値）は、要素をフロートさせず、通常のドキュメントフローに沿って配置します。また、inheritは親要素のfloatの値を継承し、initialは初期値であるnoneに設定し、unsetは継承または初期値に設定します。
floatを使用する際は、親要素の高さがフロート要素を囲まなくなる「フロートの回り込み」と呼ばれる現象に注意が必要です。この問題を解決するためには、clearプロパティを適用する、または親要素にoverflow: hidden;などを設定してブロック整形コンテキストを確立する手法が一般的に用いられます。現代のWebレイアウトでは、より柔軟で強力なFlexboxやCSS Gridといった新しいレイアウトモジュールが推奨されており、floatは特定のレイアウト用途に限定して使われる傾向があります。
公式リファレンス: float
構文(syntax)
1float: left;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません