HTML のフローティング要素の後に上部マージンが機能しないのはなぜですか?

フローティング要素の後に HTML 要素の上マージンが無視されるのはなぜですか?

CSS では、フローティング要素がドキュメントの通常のフローから削除され、それを囲む他の要素。ただし、フロートの後の要素に上マージンを適用しようとすると、この動作により予期しない結果が生じる可能性があります。

CSS 仕様によると、「フロートはフロー内にないため、位置決めされていないブロック ボックスは、フロートボックスの前後に作成されたフロートは、フロートが存在しないかのように垂直に流れます。」その結果、後続の要素の上マージンはブラウザの計算では基本的に無視されます。

この問題を修正するための一般的なアプローチは、後続の要素をコンテナでラップし、マージンの代わりにラッパーにパディングを適用することです。要素に。これにより、外部要素から独立した内部空白スペースが効果的に作成され、上部マージンが期待どおりに機能できるようになります。

例:

以下のサンプル HTML コードでは、浮動小数点

後続の

のマージンを防ぎます。

<div>
<p>これを修正するには、後続の </p>
<div> をラップします。 <pre class="brush:php;toolbar:false"><div><p>この手法を利用することで、浮動要素と後続の要素の間に「バッファ」を効果的に作成し、上部マージンが適切に適用されるようにし、 </p></div>