CSSプロパティはレイアウトにとって非常に重要なプロパティです。 Webページのデザインを正確に配置することができますが、使用するには、その動作方法を理解する必要があります。
スタイルシートでは、CSSのfloatプロパティは次のようになります。
.right {フロート：右; }
これはブラウザに、 "右"のクラスを持つすべてが右に浮かぶべきであることを伝えます。
次のように割り当てます。
class = "right" />
CSS floatプロパティで何を浮かべることができますか？
ウェブページ上のすべての要素を浮動させることはできません。ブロックレベルの要素のみを浮動させることができます。これらは、images（）、paragraphs（）、divisions（）、およびlists（）のように、ページ上のスペースを占める要素です。
テキストに影響を与えるが、ページ上にボックスを作成しない他の要素は、インライン要素と呼ばれ、フローティングすることはできません。これらは、span（）、改行（）、強強調（）、イタリック（）などの要素です。
彼らはどこに浮かんでいますか？
要素を右または左に浮動させることができます。浮動要素に続く要素は、反対側の浮動要素の周りを流れます。
たとえば、画像を左に浮かべると、それに続くテキストやその他の要素が右に流れます。そして、画像を右に浮かせば、それに続くテキストや他の要素が左に流れます。フロートスタイルが適用されていないテキストブロックに置かれた画像は表示されますが、ブラウザは画像を表示するように設定されています。これは、通常、画像の一番下に表示される次のテキストの最初の行です。
彼らはどのように遠くに浮かぶだろうか？
フローティングされた要素は、できるだけコンテナ要素の左または右に移動します。これにより、コードの記述方法によっていくつかの異なる状況が発生します。これらの例では、私は小さな DIV 左側の要素：
- 浮動要素の幅があらかじめ定義されていない場合は、浮動小数点数に関係なく、必要な数の空きスペースが必要です。注：一部のブラウザでは、幅が定義されていないときに浮動要素の横に要素を配置しようとします。通常は、浮動小数点要素にわずかなスペースしか与えません。だからあなたはすべきです 常に幅を定義する 浮遊要素に
- コンテナ要素がHTML要素の場合、float
DIVページの左の余白に置かれます。 - コンテナ要素が他の何かに含まれている場合、浮動
DIVコンテナの左マージンに座ります。 - フローティングされた要素をネストすることができます。その結果、フロートが驚くべき場所に終わることがあります。たとえば、この浮動小数点数は左浮動小数点数です。
DIV右フロートの内側DIV. - フローティング要素は、コンテナ内に空きがある場合、隣り合って配置されます。たとえば、このコンテナの幅は100ピクセル3
DIV要素は400ピクセル幅のコンテナに浮かんでいます。
フロートを使用してフォトギャラリーのレイアウトを作成することもできます。各サムネイルは、（同じサイズのときに最も効果的です） DIV キャプションと浮動小数点 DIV コンテナ内の要素どのくらいのブラウザウィンドウであっても、サムネイルは一様に並んでいます。
フロートをオフにする
要素を浮動させる方法を理解したら、浮動小数点をオフにする方法を知っておくことが重要です。 CSSのclearプロパティで浮動小数点をオフにします。左フロート、右フロート、またはその両方をクリアすることができます：
クリア：左;クリア：右;両方ともクリア。
clearプロパティを設定した要素は、その方向に浮動する要素の下に表示されます。たとえば、この例では、テキストの最初の2つの段落はクリアされませんが、3番目の段落はクリアされます。
さまざまなレイアウト効果を得るために、ドキュメントのさまざまな要素の明確な価値を持ってプレイしてください。最も興味深い浮動レイアウトの1つは、テキストの段落の横にある右または左の列の一連のイメージです。テキストが画像をスクロールするのに十分な長さでなくても、すべての画像でクリアを使用して、その画像が前の画像の横ではなく列に表示されるようにすることができます。
HTML（この段落を繰り返します）：
ボリュームのあるプレゼンテーションでは、時間の経過とともに変化します。非盲検、熟練者、老人老人斑などが挙げられる。
CSS（画像を左に浮かべる）：
img.float {float：left; クリア：左; マージン：5ピクセル。}
そして、右に：
img.float {float：right; クリア：右; マージン：5ピクセル。}
フロートを使用したレイアウト
どのように理解したら 浮く プロパティが動作する場合、それを使用してWebページをレイアウトすることができます。これらは、私が流したウェブページを作るために取るステップです：
- レイアウトを紙の上やグラフィックツールや頭の中にデザインする。
- ページ分割がどこになるかを決定します。
- さまざまなコンテナの幅とコンテナ内の要素を決定します。
- すべてを浮かべる。一番外側のコンテナ要素が左に浮かんでいるので、ブラウザーのビューポートとの関連でどこにあるのかが分かります。
レイアウトセクションの幅（パーセンテージは問題ありません）がわかっている限り、 浮く プロパティを使用して、ページの所在地に配置します。そして素晴らしいことは、Internet ExplorerやFirefoxとは異なるボックスモデルについて心配する必要はないということです。
