フローティング要素が正しく位置合わせされないのはなぜですか?

CSS Float 動作の期待と現実

CSS では、要素を水平方向に整列させるために float プロパティがよく使用されます。ただし、他の要素と一緒に使用すると、予期しない動作が発生する可能性があります。

問題

次の例は、よくある誤解を示しています:

<code class="html"><div class="inline">
    first line<br>
    second line<br>
    third line<br>
</div>

<div class="yellow">floated div</div></code>

<code class="css">.inline {
    float:left;
}

.yellow {
    background-color:yellow;
}</code>

この例では、2 番目の div (背景が黄色) が最初の div の右側に配置されると予想されるかもしれません。ただし、実際の例で見られるように、それでもコンテナの幅全体を占有します。

動作を理解する

この動作は、実際には float 配置の意図された結果です。 。要素がフローティングされると、後続のコンテンツはその要素の右側に流れていきます。ただし、含まれるブロックの幅 (次の要素によって設定される) はまだ 予約されています。

CSS 仕様に従って、ブロックレベルの要素 (div や p など) は位置決めされていない場合はフロートを無視します。一方、ライン ボックスはフロートの側面に沿って流れますが、その幅は短くなります。

解決策

期待される結果を達成するには、2 番目の div が正しく配置されている場合は、可視以外の値を持つオーバーフロー プロパティを 2 番目の div に追加できます。これにより、CSS レベル 2.1 仕様で指定されているように、float 要素とのオーバーラップが防止されます。

Example

<code class="css">.yellow {
    overflow: hidden;
}</code>

この追加により、2 番目の div は重なり合わなくなります。

オーバーラップの目的

オーバーラップは、後続のコンテンツがフローティング要素を超えて継続するのに十分な長さの場合に役立ちます。デフォルトで重複が制限されている場合、コンテンツは浮動要素の下に続かず、予期しない結果が生じます。

以上がフローティング要素が正しく位置合わせされないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。