プロパティは、もともとはテキストブロック内の浮動画像のためのものでしたが、ウェブページ上に複数列レイアウトを作成するために最も一般的に使われるツールの1つになりました。この記事で説明しているように、フレックスボックスとグリッドの出現により、今は当初の目的に戻っています。プロパティおよびその他のフロートのクリア方法の使い方を習得します。プロパティが導入されました。あなたが新聞のレイアウトで得るかもしれない種類のものです。ウェブ開発者はすぐに画像だけでなく何でも浮かべることができることに気づいたので、フロートの使用は広がりました。以前のコースでの派手な段落の例は、楽しいドロップキャップ効果を生み出すためにどのようにフロートを使えるかを示しています。フロートは一般に、互いに並ぶように浮動する複数列の情報を含むウェブサイト全体のレイアウトを作成するために使用されてきました(デフォルトのふるまいでは、列はソースに表れる順序と同じ順序で上下に配置されます)。新しくより良いレイアウトテクニックが利用可能なので、このようにフロートを使うことは過去のテクニックとみなされるべきです。この記事では、フロートの正しい使い方に集中します。簡単なフロートの例フロートの使い方を探りましょう。要素の周りにテキストのブロックを浮かべることを含む本当に簡単な例から始めましょう。テンプレートを使ってそれを埋め、適切な場所に以下のコードを挿入することで、フォローすることができます。セクションの一番下では、最終的なコードがどのようになるべきかの実例を見ることができます。次のコードを追加し、それまでの内部にあるものはすべて削除します。ファイルを作成するか、選択します)。通常フローでテキストの上側に表示されます。規則に2つのプロパティを追加します。1em;}保存してリフレッシュすると、次のようになります。1em;}フロートがどのように機能するかを考えてみましょう。<body>)の左側に固定されます。通常のレイアウトフローで浮動要素の下側に来るコンテンツは、それを包み込み、浮動要素の最上部まで、その右側のスペースを埋めます。そこで、それは止まるでしょう。コンテンツを右に浮かべるとまったく同じ効果が得られますが、逆になります。浮動要素は右に固定され、コンテンツはその左側を包み込みます。置き換えて、結果がどうなるかを確認してください。テキストを押しのけるためにフロートにマージン(margin、余白)を追加することはできますが、テキストをフロートから遠ざけるためにテキストにマージンを追加することはできません。これは、浮動要素は通常フローから外され、後続項目のボックスが実際にはフロートの背後にあるためです。例にいくつかの変更を加えることによってこれを実証することができます。次の規則を追加します。これらは後続段落に背景色を与えます。変更すると、フロートの全周にマージンができます。以下の例のように、浮動ボックスの真下にある段落の背景を見ることができます。#fff;}後続要素の行ボックスは短くなっているのでテキストはフロートの周りを囲みますが、フロートは通常フローから除かれるため、段落の周りのボックスは依然として全幅のままです。フロートのクリアフロートは通常フローから除かれ、他の要素がその横に表示されることを見てきました。したがって、後続要素の上方向への移動を止めたい場合は、それをクリアする必要があります。プロパティによって達成されます。以下を追加してください。left;}後続段落で、浮動要素がクリアされ、並んで現れなくなったことがわかります。プロパティは次の値を受け入れます。左に浮いている項目をクリアします。右に浮いている項目をクリアします。左や右に浮いている項目をどちらもクリアします。フロートを包み込むボックスのクリア浮動要素に後続するものをクリアする方法はわかりましたが、背の高いフロートと短い段落があり、その両方の要素の周りをボックスが包む場合はどうなるか見てみましょう。囲まれるように文書を変更します。クラスに次の規則を追加してからページをリロードします。left;}段落に背景色を与えた例と同じように、背景色がフロートの背後にあることがわかります。前と同じように、これもまた、フロートが通常フローから外されたためです。コンテンツが短い場合でも、ボックスの底に浮動項目とラッピングコンテンツを包む必要がある場合には、後続要素のクリアでは、このボックスのクリアの問題を解決することはできません。これに対処する方法は3つあります。この状況に適切に対処する3番目の新しい方法です。ハック」として知られているものを使うことです。これはフロートとラッピングコンテンツを含むボックスの後に生成したコンテンツを挿入し、両方をクリアするように設定することを含みます。block;}ページをリロードすると、ボックスはクリアされます。設定した場合と基本的に同じです。以外の値に設定することです。前と同じように、ボックスはクリアされます。context、BFC)と呼ばれるものを作成することによって機能します。中に含まれ、背景は両方の項目の背後にあります。これは通常はうまくいきますが、場合によっては、オーバーフローを使用することによる意図しない結果が原因で、不要なスクロールバーや切り取られた影が見つかることがあります。いう値を使うことです。それを使用しても意図しない結果が生じることはありません。これをサポートするブラウザーを持っていると仮定すると、ボックスはクリアされます。まとめあなたは今、現代のウェブ開発でフロートについて知っておくべきことがすべてわかっています。過去のレイアウト方法の使用方法については、過去のレイアウト方法に関する記事を参照してください。古いプロジェクトで作業している場合に便利です。inbox.現在、ニュースレターは英語でのみ提供されています。従って私の個人情報を扱うことに同意します。