ホームページ > 記事 > ウェブフロントエンド > CSSフローティングの方法を簡単に紹介
要素の水平浮動方向は、要素が左右にのみ移動でき、上下には移動できないことを意味します。
フローティング要素は、その外縁が包含ボックスまたは別のフローティング ボックスの境界線に触れるまで、左または右に移動しようとします。
フロート要素の後の要素がそれを囲みます。
float 要素より前の要素は影響を受けません。
Text
フローティングは、絶対配置
のように文書フローから完全に切り離されていない状態です。
< ;p id="p2" >
このとき、p1には高さが設定されていません。p2には100pxの高さが設定されていますが、p2絶対位置がドキュメント フローから完全に分離されているため、p1 の高さをサポートできません。 ;
gt;
p1にp2が浮いた影響をクリアしないと、p2に左フローティングを設定しています。 p1 はフロートを感じることができないため、p1 の高さは増加します
しかし、フロートをクリアすると、p1 はフロートの存在を感じることができます (ドキュメント内にあるフロートと同等です)。流れ)、高さが拡張されます。
浮遊: 2 番目の状況
神経質で偏屈
が影響を受けます。
フローティング: 3 番目の状況
精神病
> ;
float (p2) の存在を感じられない場合、
は float でカバーされますが、完全にはカバーされません。
の背景は確かにカバーされていますが、
のテキスト内容はカバーされていないことがわかります。フローティングではドキュメント フロー内のテキストがカバーされません。他のプロパティはオーバーライドされます。
解決策
にclear:left;を設定して、
が(p2)の存在を感じられるようにします。
クレイジー&クレイジー
上記の記事は CSS フローティングについて簡単に説明しています これがすべての内容です編集者があなたに共有したものなので、参考にしていただければ幸いです。また、PHP 中国語 Web サイトをサポートしていただければ幸いです。 CSS フローティングの方法に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。