簡単なCSSの質問ですが、私はしばらく疑問に思っていましたが、これがどのように機能するかを正確に理解したいと思います。
私が次のものを持っているとしましょう：
<div>
<p>some text</p>
<p style="float: left">some text</p>
</div>
float: left特定の要素からを削除する<p>と、要素とその前の兄弟がより近くにスタックされます。
要素をフローティングにすると、上部のマージンが増加するのはなぜですか？
1124 次
2 に答える
6
違いの理由は、マージンの折りたたみと呼ばれる動作です。
段落には、デフォルトで、ユーザーエージェントが定義した上下の余白があることに注意してください。
2番目の段落にがない場合float: left、最初の段落の下余白と2番目の段落の上余白が隣接しているため、互いに折りたたまれます。
2番目の段落にが含まれている場合float: left、これら2つの余白は互いに折りたたまれなくなります。次の理由により、隣接しているとは見なされなくなりました。
次の場合に限り、2つのマージンが隣接しています。
- どちらも、同じブロックフォーマットコンテキストに参加するインフローブロックレベルボックスに属しています
- [...]
「ブロックフォーマットコンテキスト」リンクをたどると、次のことがわかります。
フロート[...]は、そのコンテンツの新しいブロックフォーマットコンテキストを確立します。
仕様はさらに次のように述べています。
上記のルールは次のことを意味することに注意してください。
- フロートボックスと他のボックスの間のマージンは折りたたまれません（フロートとその流入する子の間でも）。
- [...]
于 2012-06-26T15:35:45.743 に答える
0
これはChrome19では発生しませんが、ブラウザのデフォルトのスタイルシートが原因で発生します。これを防ぎたい場合は、margin：0を使用してください。パディング：0; フロート要素に。
于 2012-06-26T15:34:30.283 に答える