[CSS] 浮遊するもの

要素が浮く仕組み

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

フローティング要素は、その外端がそれを含むボックスまたは別のフローティングボックスの境界線に触れるまで、できるだけ左または右に移動します。

フローティング要素の後の要素がそれを囲みます。

フローティング要素の前の要素は影響を受けません。

テキスト

フローティングとは、ドキュメントフローから半切り離された状態であり、絶対配置のようにドキュメントフローから完全に切り離されているわけではありません。

絶対位置:

この時点では、div1 には高さが設定されていません。div2 では高さが 100px に設定されていますが、div2 は絶対的な配置が完全にドキュメントフローから外れているため、div2 をまったく認識できません。

フローティング：最初のケース

div2 に left float を設定しました。div1 の div2 のフローティングの影響をクリアしないと、div1 はフローティングを感じることができないため、div1 の高さを拡張できません。

しかし、フロートをクリアすると、div1 はフロートの存在 (ドキュメントフロー内に存在するフロートに相当) を認識できるようになり、高さが拡張されます。

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

フローティング: 2 番目のケース

狂気の陽てんかん

float (div2) は

を認識できるため、正常に表示できます。つまり、 floated 要素の前の要素は影響を受けません。

フローティング: 3 番目のケース

精神病

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

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

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

のテキスト内容はカバーされていないことがわかります。フローティングではドキュメントフロー内のテキストはカバーされませんが、その他の部分はカバーされません。属性がカバーされます。

解決策

にclear:left;を設定して、

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

精神病

声明：

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

続きを見る