フローティング要素が親コンテナを超えて拡張されるのはなぜですか?

浮動要素が Div を含む範囲を超えて拡張される理由

div 内で、要素に float が与えられると、要素は境界を越えて拡張される可能性があります。部これは、フローティング要素がドキュメントの通常のフローから削除され、フローティング要素が他の要素に隣接するのではなく周囲に配置されるために発生します。結果として、これらは、含まれる div の幅には影響しません。

フローティング項目をストレッチするソリューション

1. Overflow:hidden

簡単な解決策は、overflow:hidden を親 div に追加することです。これにより、親の境界を越えるすべてのものが強制的に非表示になります:

#parent { overflow: hidden }

2. Floating Parent Div

もう 1 つのオプションは、親 div もフローティングにすることです:

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

これにより、親 div がフローティング要素のように動作し、フローティングされた子要素がその親 div に影響を与えることができるようになります。身長。

3.クリア要素

クリア要素を使用すると、問題を解決することもできます。

<div class="parent">
  <img  class="floated_child lazy" src="/static/imghwm/default1.png" data-src="..." alt="フローティング要素が親コンテナを超えて拡張されるのはなぜですか?" >
  <span class="clear"></span>
</div>

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

クリア要素は、フロートされた子要素の流れを中断し、それを一番下に押し込みます。親部門

の

以上がフローティング要素が親コンテナを超えて拡張されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。