浮動要素がその要素を含む Div をオーバーフローするのはなぜですか?それを修正するにはどうすればよいですか?

浮動要素のエスケープ封じ込め: Div オーバーフローのトラブルシューティング

div 内で浮動小数点を操作する場合、浮動要素が範囲を超えて拡張される問題が発生する可能性があります。それらを含む div の境界。この寸法の不一致により、意図したレイアウトが中断される可能性があります。

根本原因:

フロートが通常のドキュメント フローから削除され、親要素にギャップが生じます。その後、非フローティング コンテンツがこの空いたスペースを埋めるように調整され、その結果、フローティング要素を包含できない小さな div が生成されます。

解決策 1: オーバーフロー コントロール

• オーバーフローの追加: 親に対して非表示div:

#parent { overflow: hidden }

これにより、浮動要素のオーバーフローが防止され、浮動要素が div の境界内に留まることが保証されます。ただし、div の高さを超えるコンテンツは切り取られる可能性があります。

解決策 2: 親 Div をフローティングする

• 親 div をフローティングします:

#parent { float: left; width: 100% }

これにより、フローティングに対応するために親 div を垂直に伸ばすことができます。 コンテンツ。無限の拡張を避けるために、div の幅が固定値またはパーセンテージに設定されていることを確認してください。

解決策 3: 要素をクリアする

• 下にクリア要素を使用します。フローティング コンテンツ:

<div class="parent">
  <img class="floated_child" src="..." />
  <span class="clear"></span>
</div>

span.clear { clear: left; display: block; }

クリア要素は、センチネルは、次のコンテンツをフローティング コンテンツの下の新しい行で強制的に開始し、div の正しいサイズを復元します。

以上が浮動要素がその要素を含む Div をオーバーフローするのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。