ホームページ  >  記事  >  ウェブフロントエンド  >  CSSフローティングの方法を簡単に紹介

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

高洛峰
高洛峰オリジナル
2017-03-07 13:53:081700ブラウズ

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

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

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

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

Text

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

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


< ;p id="p2" >


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

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

gt;

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

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



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

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

浮遊: 2 番目の状況

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

神経質で偏屈

が影響を受けます。


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

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

精神病

> ;


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

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

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

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

解決策

にclear:left;を設定して、

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


クレイジー&クレイジー

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

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

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。