CSSで浮動要素の行折り返しを実装する方法

この記事ではCSSでフローティング要素の行折り返しを実装する方法を紹介します。必要な方は参考にしていただければ幸いです。

こんなレイアウト効果を作りたい時

紫色のボックスの内容はこんな感じです

リストです

li要素はブロックレベル要素であり、デフォルトのサイズは親要素です ul と行の折り返しの幅です

li に背景がない場合は、心配する必要はありません

しかし、問題は、背景があるだけでなく、適応可能な幅と高さもあることですテキストに基づいています

これはインラインブロックタイプの機能です

ので、liをインラインブロックにしたい場合は、目に見えない変更を加えるためにfloatを設定します

しかし、それがfloatの場合、問題はラップされません。 li folat:left を指定してから、clear:both を使用して float をクリアするだけです

float をクリアするには、合計 4 つの属性があります

clear:both|left|right|none;

すべてテストしましたまず、同じ行にないという目的を達成するために、box1に正しいclear:rightを設定します

うーん、なぜ期待した効果が得られなかったのですか？ ? ?

次に、2 番目の要素 box2 を clear:left; に設定して、結果を見てみましょう

さて、box1 box2 は同じ行になく、目的は達成されました

それでは、なぜそうならないのかbox1 に clear:right を設定するとうまくいきます

box1 は右側に浮動要素がなくなるように位置を変更することしかできないからです

人生と同じように、他人を変えることはできませんが、自分を変えることはできます

しかしbox1 の位置が変わっても、box2 は引き続き続きます。box1 の場合は、フローティング要素がドキュメント フローから外れているためです

そして、ドキュメント フローから外れている要素は、特殊な要素になっているため、見つかるはずです。インラインブロック型

幅と高さがあり、改行がありません インラインとブロックの機能の組み合わせは素晴らしいです

ここで box1 正しい float をクリアしても、box2 は引き続き続きます 最終的な結果は box1 box2 box3 です。 1 行

ps。おそらく、box1 は次の行に実行され、box2 と box3 は移動しないと思われるでしょう。Float は float:none ではなく、すべて浮動小数点です。

、box1、box2、box3 が順に作成されます。なぜ私の前に位置していると思いますか? ?私は盲目的に走った

しかし、ボックス2は左のフロートをクリアし、ラインを折り返すように位置を変更しました

順序はまだ同じですボックス1ボックス2ボックス3

ボックス3はボックス2に続きます

この理解を通じて、私はFloating Cognition についての理解が深まります

そこで、ラップする必要があるすべての要素をクリアに設定します:両方

まったく問題ありません

左側で機能しない場合は、右側でも機能しません、右側も機能しない場合は、次の要素に頼ってください

おすすめ関連記事:

floatとは何ですか?CSSのclear floatの原理

以上がCSSで浮動要素の行折り返しを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。