Mengapa Margin Atas Elemen Selepas Terapung Kadang-kadang Hilang?

Margin Atas Elemen HTML yang Diabaikan Selepas Terapung

Dalam pembangunan web, adalah perkara biasa untuk menggunakan terapung untuk meletakkan elemen di sebelah satu sama lain. Walau bagaimanapun, apabila unsur terapung hadir, jidar atas elemen berikutnya boleh diabaikan dalam penyemak imbas tertentu.

Tingkah laku ini berpunca daripada fakta bahawa terapung dialih keluar daripada aliran biasa dokumen, menyebabkan sekatan berjaya -elemen tahap mengalir seolah-olah apungan tidak wujud. Ini boleh menyebabkan elemen kedua secara visual bersebelahan dengan yang pertama, walaupun mempunyai jidar atas yang ditentukan.

Pertimbangkan contoh berikut:

<div>
<p>Dalam senario ini, div kedua dijangka untuk dipisahkan daripada yang pertama dengan margin atas 90px. Walau bagaimanapun, dalam Firefox atau IE8, div kedua akan kelihatan menyentuh yang pertama.</p>
<p><strong>Penyelesaian: Membungkus dengan Ruang Putih Dalaman</strong></p>
<p>Untuk membetulkan isu ini, perkara biasa penyelesaian adalah untuk membungkus div kedua dalam elemen lain. Elemen pembalut ini akan bertindak sebagai penimbal antara div kedua dan elemen terapung. Selain itu, ruang putih pembalut hendaklah ditentukan menggunakan pelapik dan bukannya jidar. Ini membantu memastikan pelapik tidak terjejas oleh unsur luaran.</p>
<p>Berikut ialah versi contoh yang diubah suai:</p>
<pre class="brush:php;toolbar:false"><div><p>Dengan pengubahsuaian ini, elemen pembungkus membentuk pelapik 90px di bahagian atas , dengan berkesan memisahkan div kedua daripada elemen terapung seperti yang dimaksudkan.</p></div>