CSSフローティングの方法を簡単に紹介

要素の水平浮動方向は、要素が左右にのみ移動でき、上下には移動できないことを意味します。

フローティング要素は、その外縁が包含ボックスまたは別のフローティング ボックスの境界線に触れるまで、左または右に移動しようとします。

フロート要素の後の要素がそれを囲みます。

float 要素より前の要素は影響を受けません。

Text

フローティングは、絶対配置

のように文書フローから完全に切り離されていない状態です。

< ;p id="p2" >

このとき、p1には高さが設定されていません。p2には100pxの高さが設定されていますが、p2絶対位置がドキュメント フローから完全に分離されているため、p1 の高さをサポートできません。 ;

gt;

p1にp2が浮いた影響をクリアしないと、p2に左フローティングを設定しています。 p1 はフロートを感じることができないため、p1 の高さは増加します

しかし、フロートをクリアすると、p1 はフロートの存在を感じることができます (ドキュメント内にあるフロートと同等です)。流れ)、高さが拡張されます。

ここに 2 つの解決策があります

浮遊: 2 番目の状況

神経質で偏屈

が影響を受けます。

フローティング: 3 番目の状況

精神病

> ;

float (p2) の存在を感じられない場合、

は float でカバーされますが、完全にはカバーされません。

の背景は確かにカバーされていますが、

のテキスト内容はカバーされていないことがわかります。フローティングではドキュメント フロー内のテキストがカバーされません。他のプロパティはオーバーライドされます。

解決策

にclear:left;を設定して、

が(p2)の存在を感じられるようにします。

クレイジー&クレイジー

上記の記事は CSS フローティングについて簡単に説明しています これがすべての内容です編集者があなたに共有したものなので、参考にしていただければ幸いです。また、PHP 中国語 Web サイトをサポートしていただければ幸いです。

CSS フローティングの方法に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。