CSS 3 (クリアフローティングテーマ)

1. フローティングに関する 3 つの概念

フローティングフロートではありません:none;

周囲のフローティング要素をクリアする float:both これがフロートをクリアする本来の目的です

子要素のフローティングをクリアすることによる親要素のclearfixへの影響 多くの人はこれをフローティングのクリアと理解しています。 。

2.クリアフロートとは

フロートをクリアするということは、現在のラベルのフロートをクリアするという意味ではありません。そうであれば、なぜフロートを追加するのでしょうか?

実際、フロートをクリアするということは、現在の要素の隣にある浮動要素をクリアすることを意味します。ただし、現在の要素は他の要素に影響を与えることができないため、その下に逃げました。

3. なぜはっきりと浮かぶのか

レイアウト中に、特定のコンテンツを水平に配置できることを期待することがよくありますが、水平に配置した後は、内部コンテンツが不確実であるため、高さに単純に固定値を与えることはできません。また、高さが指定されておらず、子要素が浮いている場合、子ボックスからのサポートがないため、親ボックスは折りたたまれます。

クリア フローティング機能を使用すると、親要素の最後の非フローティング ボックスに clear:both を使用して、親ボックスの高さを支え、内部コンテンツの変更に応じて高さを変更できます。

4. 浮く方法を知る

4.1. 追加のタグ方法

原則: 単一のラベルとクリア: の両方を使用してフローティング要素の下で実行することで、フローティング子ボックスによって引き起こされる親ボックスの崩壊を排除します。

代表的なウェブサイト: 京東

利点: 理解しやすく、習得も簡単です

デメリット: 意味のない空のタグを大量に追加することは、構造とパフォーマンスの分離の原則に準拠しておらず、後のメンテナンスに役立ちません

4.2. 親要素セットのオーバーフロー: hidden

原則: 親ボックスに BFC を形成させる BFC の特徴の 1 つは、浮動要素を保持できることです。

利点: 構造的および意味論的な問題がなく、コードの量が非常に少ないです

デメリット: コンテンツが増えると、コンテンツが自動的に折り返されず、コンテンツが非表示になりやすく、オーバーフローする必要がある要素が表示できなくなります

4.3. 単一の擬似要素

リーリー

典型的なウェブサイト: Sina、NetEase

4.4 二重擬似要素

.clearfixの紹介

リーリー リーリー

display:tableを使う理由はdisplay:blockに隙間があるからです

余白の結合を防ぐためにbeforeを追加します

代表的なウェブサイト: Xiaomi、Taobao