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