このページには、一般的なfloatの例が含まれています。

ボックスのグリッド/等幅ボックス

画像を並べて表示

ボックスのグリッドを使用して、画像を並べて表示することもできます。

等高ボックス

前の例では、ボックスを同じ幅で並べてフロートする方法を学びました。ただし、同じ高さのフローティング ボックスを作成するのは簡単ではありません。ただし、次の例のように、固定の高さを設定することで簡単に修正できます。

しかし、これはあまり柔軟ではありません。ボックスに常に同じ量のコンテンツが含まれていることを保証できれば問題ありません。しかし、多くの場合、内容は同じではありません。上記の例を携帯電話で試すと、2番目のボックスのコンテンツがボックスの外に表示されることがわかります。ここで、CSS3 Flexboxが役立ちます。これは、ボックスを最長のボックスと同じ長さに自動的に引き延ばすことができるためです。

ナビゲーションメニュー

ハイパーリンクのリストと共にfloatを使用して、水平メニューを作成することもできます。

Webレイアウトの例

その他の例

段落内で右に浮くborderとmarginのある画像
段落内で画像を右にフロートさせます。画像に枠線と余白を追加します。

キャプションが右に浮かび上がる画像
キャプション付きの画像を右にフロートさせます。

段落の最初の文字を左にフロートさせる
段落の最初の文字を左にフロートさせ、文字のスタイルを設定します。

floatを使用したWebサイトの作成
floatを使用して、ナビゲーション バー、ヘッダー、フッター、左側のコンテンツ、およびメイン コンテンツを含むホームページを作成します。

すべてのCSS Floatプロパティ

プロパティ	説明
box-sizing	要素の幅と高さの計算方法を定義します。paddingとborderを含めるか、含めないか。
clear	フローティング要素の隣にある要素に対して何が起こるかを指定します。
float	全ての要素を左右どちらにフロートさせるかを指定します。
overflow	コンテンツが要素のボックスをオーバーフローした場合の動作を指定します
overflow-x	コンテンツが要素のコンテンツ領域からはみ出した場合、コンテンツの左端/右端をどうするかを指定します。
overflow-y	コンテンツが要素のコンテンツ領域からはみ出した場合に、コンテンツの上端/下端をどうするかを指定します。