floatプロパティは、要素が浮くかどうかを指定します。
clearプロパティは、浮動要素の動作を制御するために使用されます。
フロートプロパティ
最も単純な使用では、 floatプロパティは、画像の周囲にテキストをラップするために使用することができます。
次の例では、画像をテキストの右に浮くように指定します：
clearプロパティ
clearプロパティは、浮動要素の動作を制御するために使用されます。
浮動要素の後の要素がその周りに流れます。 これを避けるには、使用するclearプロパティを。
clearプロパティは、浮動要素が浮いているように許可されていない要素の両側に指定しています。
clearfix Hack - overflow: auto;
要素がそれを含む素子よりも背が高い、それがフローティングされている場合は、その容器の外側にオーバーフローします。
その後、我々は、追加することができますoverflow: auto;含む要素にこの問題を修正します：
Webレイアウト例
使用して、ウェブ全体のレイアウトを行うのが一般的である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;
} »それを自分で試してみてください 
その他の例
段落に右に浮かぶボーダーとマージンを持つ画像
段落の右に画像フロートをしてみましょう。 画像に境界線と余白を追加します。
右に浮かぶキャプション付き画像
右にキャプションフロートで画像をしてみましょう。
左に段落フロートの最初の文字をしてみましょう
左に段落フロートの最初の文字をしようと手紙のスタイル。
水平方向のメニューの作成
水平方向のメニューを作成するために、ハイパーリンクのリストにフロートを使用してください。
テーブルなしでホームページを作成します
ヘッダー、フッター、左のコンテンツとメインコンテンツでホームページを作成するためにフロートを使用します。
すべてのCSSフロートプロパティ
| プロパティ | 説明 |
|---|---|
| clear | これは浮動要素がフロートに許可されていない要素の両側に指定します |
| float | 要素が浮くかどうかを指定します |
| overflow | コンテンツは要素のボックスをオーバーフローした場合に何が起こるかを指定します |
| overflow-x | それは要素のコンテンツ領域をオーバーフローした場合、コンテンツの左/右のエッジをどのように処理するかを指定します |
| overflow-y | それは要素のコンテンツ領域をオーバーフローした場合、コンテンツのトップ/ボトムのエッジをどのように処理するかを指定します |