CSSの使用に関する深い理解 clear:both

clear:both清除浮動これは私が常に持っていた印象ですが、私はこれをめったに使用せず、私の理解は実際にはあまり正確ではありません。今日情報を確認して記録しました。

ドキュメントフローから外れます

float の本来の目的はテキストの折り返しを実現することであり、これはドキュメントのフローから部分的に分離することとして理解できます。

CSS では、ドキュメント フローから外れるとは、ボックスが通常のレイアウトから外れ、他のボックスが存在しないかのように配置されることを意味します。文書フローからの分離には2つの種類があります

• 完全にドキュメント フローから外れます。たとえばposition:absoluteで絶対配置ボックスを使用すると、他のボックス (それ自体、またはボックス内の要素) は、レイアウトのためにこの絶対配置ボックスを無視します。
• ドキュメント フローから部分的に外れます。つまり、 floatボックスです。 floatプロパティを使用した後、他のブロック ボックスはレイアウトのためにfloat盒子を無視しますが、他のボックス内のインライン要素とインライン ブロック要素は、このフローティング ボックス用のスペースを確保します。

クリア:両方

clear:both属性が追加されたボックスに作用します

ボックスにclear:both追加すると、そのボックスの上境界線が、その之前フロート ボックスの底外邊距低于なります。

したがって、 clear:bothフロートをクリアしませんが、フロートの効果をクリアします。フローティング ボックスは、まだ部分的にドキュメント フローから外れています。

clear の値は left または right です。私の意見では、これは想要低于的那個浮動盒子のフローティング方向によって異なります。 bothの値は、それより前のフローティング ボックスよりも低くなります。

クリアリングの影響の例

A、B、Cの3つのボックスを設置しました

3 つのボックスがすべて左にフロートされている場合:

C が float に設定されていない場合:

Bにclear:both/clear:leftを追加します。

ご覧のとおり、B 自体によって発生したフローティング効果はクリアされ、その上境界線は任何在他之前的浮動盒子的底部下にありますが、非フローティング ボックス C はまだ AB の下にあり、その中のフォントによってフローティング ボックスのためのスペースが確保されています。

親ボックスに疑似要素を追加する::after

ここで、 div（class:box）を使用して 3 つのボックス ABC を囲み、 boxの外側にボックスoutを追加します。ここで、ABC と out はすべてフロートするように設定されます。今はこんな感じです:

out のフロートを削除します。

これは当然のことです。

ボックスに疑似要素を追加する

.box::after{
  クリア: 両方;
  高さ:10px;
  幅:10px;
  背景：黄色;
  表示: ブロック;
  コンテンツ： "";
} 

これで外側のボックスoutのフロート効果がクリアされましたが、これはclear:bothフロートをクリアしたからではなく、 after偽元素自体のフロート効果がクリアされ、その前のフローティング ボックスの下になったためです。これにより、 boxの高さが崩れなくなり、 outがboxのすぐ下になりました。これが通常のドキュメント フローです。

＃＃ 仕上げる

CSSの基礎知識ですが、これまでじっくり読んだことがありませんでした。今回は整理してみました。間違いなどありましたら、この記事をご覧になった方はご指摘いただけると幸いです。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。