<div style="float: left;">Left</div>
<div style="float: right;">Right</div>
<div style="clear: both; margin-top: 200px;">Main Data</div>

Neden 'Ana Veri' yukarıdaki kod çalışıyor? margin:top.

Elemanları gerçekten değil "margin hesaplama gibi gider." bildiğim kadarıyla orada süzülüyor

İki divs süzülüyor içine koyabilirsinizbaşka birvar olan bir "taşma:" ayarlayın: . gizli

<div style='overflow:hidden'>
  <div style="float: left;">Left</div>
  <div style="float: right;">Right</div>
</div>
<div style="clear: both; margin-top: 200px;">Main Data</div>

edit&; bu biraz eklemek İçin 5 yaşındaki bir çocuğun cevabı: - kafa karıştırıcı davranışının nedenini margin collapse biraz karışık bir süreç olduğunu düşünüyorum. OP orijinal HTML ile iyi bir numara böyle bir CSS kuralı eklemek için:

div { border: 1px solid transparent; }

Puf! Şimdi (<div> benim ek olmadan) gayet iyi çalışıyor! Peki, sınırlar bu ekstra piksel hariç. Özellikle, bendüşünüyorumclear: both çalışır şekilde bir arada ve kenar boşluğu daraltma operasyonu kod beklenmedik düzeni bu sonucu kurallar.