2

簡単なCSSの質問ですが、私はしばらく疑問に思っていましたが、これがどのように機能するかを正確に理解したいと思います。

私が次のものを持っているとしましょう：

<div>
   <p>some text</p>
   <p style="float: left">some text</p>
</div>

float: left特定の要素からを削除する<p>と、要素とその前の兄弟がより近くにスタックされます。

要素をフローティングにすると、上部のマージンが増加するのはなぜですか？

4

2 に答える 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 に答える