CSS フロートプロパティ図 フロートプロパティの詳細

CSS の float プロパティを正しく使用することは、カバーすべき内容が多く、ブラウザの互換性の問題も多数あるため、困難な作業になる可能性があります。その配置には、包含ブロックだけでなく、行ボックス、ブロック ボックス、インライン ボックスも含まれます。この記事には、float プロパティを適用する実施形態の実例といくつかのエラーが含まれています。

「フロート」とは何ですか?

CSS の特定の要素はブロック要素です。たとえば、段落タグを 2 つ P として配置すると、2 行に配置されます。各要素は 1 行を占めます。1 行で表示したい場合は、インライン属性を使用してページに表示できます。

ページ要素の折り返しプロパティを変更するもう 1 つの効果的な方法は、float を使用することです。典型的な例としては、"float" を使用して画像を左または右に揃えることがあります。以下は、画像と段落を含む単純な HTML コードです。

画像の外観を変更するために、画像に CSS コードを追加してみましょう。

さらにテキストがある場合、段落は画像の周囲に折り返されます。

たとえば、画像とテキストを 20 ピクセルインデントする必要があります。このようなコードを記述すると、次のコードは間違っており、動作しません。

それでは、上記の p 段落の 20 ピクセルのインデントがなぜ機能せず、効果的ではないのかと疑問に思うかもしれません。確認するには、スケルトン コードを追加してみましょう。

境界線がないと (境界線はここでは影響しません。単に理解してもらうためのものです)、画像が段落内に表示されることがわかります。したがって、最初のケースでは margin プロパティは効果がありません。この問題を解決するには、段落pにfloat:leftを使用し、絶対幅を設定します。設定後の効果は次のとおりです。

奇妙なルール「フロート」

次に、「float」ルールを使用して float オブジェクトを変換する、より複雑な方法に進みましょう。サムネイルを作成するときに必要になる場合があります。例えば：

しかし、画像の高さが異なる場合はどうなるでしょうか?

リスト内の要素に表示属性を追加すると、次の図に示すように、効果はより良くなります。

次に垂直方向に揃えてみましょう。

より高い位置にある画像の場合、他のすべての画像が前の画像を囲むことになるので注意してください。例:

もう 1 つの例は、要素の順序を変更することです。項目のリストがあります。

「フロート」を使用すると、ページ上の項目をグループ化するのに便利ですが、次のコンテンツ (テキストまたはブロック) も変更されるという大きな問題に直面します。たとえば、次のような画像のセットがあります。

次のテキストがブロック全体に流れ始めます。

これを回避するには、「clear」プロパティを使用する必要があります。これを2番目の画像に適用すると次のようになります。

この場合、残りの画像は引き続き「float: left」を継承します。それに応じて、テキストは歪んで表示されます。

段落には clear:both を使用する必要があります。

さて、前の例で、ギャラリーに背景を設定する必要があると想像してみましょう。アイテムが浮かばない場合は、次のようになります。

最初に高さを UL に設定すると、次のようになります。

浮動項目に関する 9 つのルール:

フロートされた項目は、親コンテナーの端を超えて拡張することはできません。左フロートボックスの左マージン端は、その包含ブロックの左端より左側に現れてはなりません。 : : : : : : : : : : : : : : :

フローティングのルールは非常にわかりにくいことがわかりますが、これらのルールから、フローティングの目的は、包含ブロックをオーバーフローさせずに、できるだけ上または左/右に近づけて配置することであり、その前に生成されるブロック ボックス、フローティング ボックス、および行ボックスの上端よりも高くしないことであることが簡単にわかります。