css についてどれくらい知っていますか (9) -- float パート 2_html/css_WEB-ITnose

float については内容が多いので、前編と次回の 2 回に分けて紹介します。最初に前の部分を読んでから、次の部分を読むことをお勧めします。興味深い内容は流し読みしないでください。

1. float をクリアする

「パート 1」で、float は「破壊的」であり、親要素を「崩壊」させる原因になると述べましたが、これは望んでいることではありません。フロートによるこの影響 (つまり、よく「フロートのクリア」と呼ばれるもの) を回避するにはどうすればよいでしょうか?参考のために多くの方法がありますので、実際の状況に応じて選択してください。

まず、比較的単純だが一般的ではない 2 つの解決策を紹介します:

1. 親要素に overflow:hidden を追加する
2. 親要素を浮動させる

これら 2 つの方法は比較的単純なので、興味がある方はここでは説明しません。 、自分で試すことができます。

3 番目の方法はあまり一般的には使用されませんが、誰もが明確な:両方のことを知っておく必要があります。すべての float 要素の下に clear:both 要素を追加することで、float の破壊的な性質を排除できます。

次の 4 番目の方法は、誰もが最も習得する必要があるもので、Bootstrap も推奨しています ?? 知らないかどうかはわかりません。低い わかりました！

上の図では、.clearfix クラスを定義し、このスタイルを float 要素の親要素に適用しています。とてもシンプルですね。 Clearfix のさまざまなバージョンを検索すると、上の図にあるコードよりも多くのコードが見つかる可能性があることに注意してください。それらに注意を払う必要はありません。私のテクスチャのコードに従ってください。

実際の原理は、疑似要素セレクターを介して div の後に clear:both 要素を追加することです。これは 3 番目の方法と同じです。

2. Web ページのレイアウトにフロートを使用するのが合理的

「その 1」で述べたように、Web ページのレイアウトにフロートを使用するのは誤解であり、「誤用」です。ほとんどの人が float の本来の設計意図を誤解していると推定されますが、これは意図的ではないアプリケーションであるため、ここでの「誤用」は引用符で囲む必要があります。つまり、Web ページのレイアウトに float を使用するのは非常に合理的であり、今後もフロートを使用することが推奨されます。

ただし、float を使用して Web ページをレイアウトするためのテクニックは数多くあります。正確に適用すると、Web ページの柔軟性が向上します。以下に、一般的に使用される 2 つの Web ページ レイアウトのケースを参考のために示します。気に入らない場合は、コメントせずにメッセージを残してください。

まずは3カラムレイアウト

ブログパークのホームページは、言うまでもなく左、中央、右という古典的な3カラムレイアウトです。

このレイアウトに関して、私があげたレイアウト案は、

2番目の2カラムレイアウト

ブログパーク内の記事のリンクを例にとると、左に分かれていますそして正しい構造

このレイアウト形式の場合、私の設計計画は次のとおりです:

3. BootStrap のグリッド システム

Bootstrap に慣れていて使用している場合は、Web ページについて心配する必要はありませんブートストラップがすでに配置しているため、自分でレイアウトすることができます。 Web ページは 12 列に分割されており、複数列のレイアウトを自由に設定できるため、非常に便利です。これがブートストラップのグリッドシステムです。ここではグリッド システムについては詳しく説明しませんが、float を使用して実装されるグリッド システムの実装について簡単に説明します。

ブラウザで各セルのCSSスタイルを監視すると、セルの幅がpercentageで設定され、floatがfloat:leftで設定されていることがわかります。

親要素のクリアフローティングについては、bootstrapでは「その1」で述べたclearfixを使用していますので、ご自身で確認して試してみてください。

古典的なソフトウェアのソースコードを見るのが学習への近道 CSSを学ぶにはbootstrapを見る、jsを学ぶにはjqueryを見る…

4. まとめ

floatが多いです。 CSS の本によっては、float の内容をすべて説明するのは困難です。そのためには、包括的な理解を達成し、1 つの例から推論を引き出すために、たくさんの本を読み、たくさん練習し、古典的なシステムのソースコードをたくさん読む必要があります。

お互いに励まし合いましょう。