浮動要素がその要素を含む Div の境界を超えて広がるのはなぜですか?それを修正するにはどうすればよいですか?

Div 境界を超える浮動要素: 原因と解決策

div 内に要素を配置し、div に特定の幅を設定すると、予期しない動作が発生する浮動要素が div の境界を越えて拡張される場合に発生する可能性があります。これは、通常のフローから要素を削除するフロートの固有の性質により発生します。

問題の理由

要素がフローティングされると、要素は削除されます。ドキュメント フローから取得し、それを含む div の左側または右側に配置します。したがって、浮動要素はコンテンツの一部とみなされないため、コンテナ div の高さや幅には影響しません。

浮動要素をストレッチするソリューション

があります。この問題に対処し、float 要素が含まれる div の高さを確実に引き伸ばす方法はいくつかあります:

1。 Overflow プロパティを「hidden」に設定します

次の CSS を親 div に追加します:

#parent {
  overflow: hidden;
}

overflow: hidden を設定すると、親 div はそのコンテンツに合わせて展開されます。 float 要素を含みます。

2.親 Div をフローティングします

次の CSS を追加して親 Div もフロートします:

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

親 Div をフローティングすると、フローティングされた子がその高さを伸ばすことができます。

3.クリア要素を使用する

親 div 内のフローティング要素の直後にクリア要素を挿入します:

<div>

クリア要素の CSS スタイル:

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

clear 要素は、float 要素を次の行の先頭から強制的に開始し、親 div を拡張して対応できるようにします。

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