float プロパティは、要素をフロートするかどうかを指定します。
clear プロパティは、フロート要素の振舞いをコントロールするために使用します。
float フロートプロパティの最も単純な利用法は、画像の周りをテキストにラップすることです。
次の例では、画像をテキストの右にフロートするように指定ししています：
clear プロパティは、フロート要素の動作を制御するために使用します。
フロート要素の後の要素も、その周りにフロートされます。これを回避ために、clear プロパティを使用します。
clear プロパティは、どちら側に他要素の回り込みを許さないかを指定します。
要素がそれを含む要素よりも高く、且つ、それがフローティングされている場合、コンテナの外側にオーバーフローします。
この包含要素に overflow: auto; を追加することで、この問題を解決することができます：
float プロパティを使用して、ウェブ全体のレイアウトを行うことが一般的です：
div {
border: 3px solid blue;
}
.clearfix {
overflow: auto;
}
nav {
float: left;
width: 200px;
border: 3px solid #73AD21;
}
section {
margin-left: 206px;
border: 3px solid red;
}
Try it Yourself ❯
段落の右にフロートするボーダーとマージンを持つ画像
画像を段落の右にフロートし、ボーダーとマージンを画像に追加します。
右にフロートするキャプション付き画像
キャプション付き画像を右にフロートします。
段落の最初の文字を左にフロートします
段落の最初の文字を左にフロートし、文字にスタイルを設定します。
横向きメニューの作成
水平メニューを作成するためにハイパーリンクのリストにフロートを使用します。
テーブルを使わずにホームページを作成
フロートを使用して、ヘッダ、フッタ、左コンテンツ、とメイン・コンテンツを持つホームページを作成します。
| プロパティ | 説明 |
|---|---|
| clear | 要素のフロートを許さないサイドを指定する |
| float | 要素をフロートするかどうかを指定する |
| overflow | コンテンツが要素のボックスをオーバーフローした場合にどうするかを指定する |
| overflow-x | コンテンツが要素のコンテンツ領域をオーバーフローした場合、コンテンツの左/右端をどうするのか指定する |
| overflow-y | コンテンツが要素のコンテンツ領域をオーバーフローした場合、コンテンツの上/下端をどうするのか指定する |