Mengapa Margin Atas Tidak Berfungsi Selepas Elemen Terapung dalam HTML?

Mengapa Margin Atas Elemen HTML Diabaikan Selepas Elemen Terapung?

Dalam CSS, elemen terapung dialih keluar daripada aliran biasa dokumen, membenarkan elemen lain untuk membungkusnya. Walau bagaimanapun, tingkah laku ini boleh membawa kepada hasil yang tidak dijangka apabila cuba menggunakan margin atas pada elemen selepas apungan.

Menurut spesifikasi CSS, "Memandangkan apungan tiada dalam aliran, kotak blok tidak diposisikan dicipta sebelum dan selepas kotak apungan mengalir secara menegak seolah-olah apungan itu tidak wujud." Akibatnya, jidar atas elemen berikutnya pada asasnya diabaikan dalam pengiraan penyemak imbas.

Untuk membetulkan isu ini, pendekatan biasa ialah membalut elemen berikutnya dalam bekas dan menggunakan pelapik pada pembalut dan bukannya jidar kepada unsur. Ini secara berkesan mewujudkan ruang putih dalaman yang kekal bebas daripada unsur luaran, membolehkan margin atas berfungsi seperti yang diharapkan.

Contoh:

Dalam contoh kod HTML di bawah, terapung

menghalang margin

daripada berkuat kuasa:

<div>
<p>Untuk membetulkannya, kita boleh membalut </p>
<div> dalam pembungkus dan gunakan padding pada pembungkus sebaliknya:<pre class="brush:php;toolbar:false"><div><p>Dengan menggunakan teknik ini, kami mencipta "penampan" dengan berkesan antara elemen terapung dan elemen seterusnya, memastikan jidar atas digunakan dengan sewajarnya dan dikuatkuasakan.</p></div>