CSSクリアフロート

今日、フロートのクリアに関する記事を見て、突然脳がショートしました、あれ？なぜクリアフロートなのか？無知で申し訳ありませんが、検索してみたらこれでした。悲しいことに、私はすでに記録を持っていて、長い間使用していたので、原理さえ忘れていました。そうですね、同じ間違いを繰り返さないように、自分でまとめておこうと思います。言うことはあまりありませんが、コードが証拠です。

リーリー

さて、実行中の各ブラウザのレンダリングは次のとおりです:

A-B-C はそれぞれ I 要素の子要素であり、フローティングがない場合は、標準のドキュメント フローに従ってレイアウトされます (ブロックレベルの要素は上から下、インライン要素は左から右)。ユーザーを惹きつけるためには、限られたスペースでより多くの情報を表示する必要がある場合があります。派手な Flexbox (フレキシブル ボックス レイアウト) は使用しません。 ) IE8 以下はサポートしていないため、どうやって知っているか知りたい場合は、URL http://caniuse.com/#home を教えて自分で検索してください。さらにIEはVWおよびVHユニットをサポートしていません。お子様にはご注意ください。 通常

親要素の幅と高さを設定する必要はなく、幅と高さを適応させる必要がありますが、子要素に float: left; を追加するとどうなりますか?写真を見ながら話しましょう:

親要素はどこへ行ったのでしょうか? ！さて、ここでフローティングの原理を説明する必要があります。想像力の欠如を許してください。親要素は、その中に子ボックスを入れ続けると自動的に縮小するものだと想像します。 , 子要素にfloat（英語の本来の意味はfloat）を付けると、親ボックスの上に子要素が浮いているのと同じになり、親ボックスが自動的に縮小されます。空に戻りました。次にしなければならないのは、元に戻らないようにする方法です。

1. 親要素に overflow: hidden を追加します。この方法の長所と短所について話すと、SEO には不親切かもしれませんが、この点については経験がありません。影響は深刻です。このように説明してください。問題が発生したときに戻って修正します。

リーリー

2. 子要素の下に空の div を追加します

リーリー

box4 は追加した空要素です。 この空要素の具体的な書き方は以下の通りです:

(互換性のあるものもあります ~ 互換性のあるものもあります~ 邪悪な IE6 はデフォルトの最小高さがあるためサポートしていません)

リーリー

3. float をクリアするという目的を達成するために疑似クラス セレクターを使用します。これは私が仕事で使用している方法であり、毎回機能します。 (

ごめんなさい、今自分で穴を掘ったのですが、まだ穴の中にいます。もう一度試します...)

リーリー

そうですね、上記のようなものです。 content: '.'; display: block; は、ブラウザが解析できるようにするために使用されますが、ユーザーには表示されません。

---

オリジナル記事、Snail on the Road の転載には出典を明記してください [http://www.cnblogs.com/wowoniuzailushang]

同時公開: http://blog.csdn.net/wowoniuzailushang CSDN