Mengapa Margin Teratas Saya Diabaikan Selepas Elemen Terapung dalam CSS?

Margin Atas Diabaikan Selepas Elemen Terapung: Memahami Aliran CSS

Walaupun menentukan dengan teliti margin atas untuk div, anda mungkin menghadapi senario di mana margin diabaikan apabila div sebelumnya terapung. Tingkah laku ini berpunca daripada spesifikasi CSS, yang menyatakan bahawa unsur terapung dianggap di luar aliran biasa. Akibatnya, elemen blok tidak diposisikan yang dibuat sebelum atau selepas elemen terapung berkelakuan seolah-olah apungan itu tidak wujud.

Kod Contoh

Pertimbangkan kod HTML berikut:

<div> <p>Dalam contoh ini, div kedua mempunyai margin atas 90px. Walau bagaimanapun, dalam Firefox dan IE8, div kedua nampaknya menyentuh div pertama, tanpa margin atas yang ketara.</p>
<h3 id="Penyelesaian-Mencipta-Pembungkus">Penyelesaian: Mencipta Pembungkus</h3>
<p>Untuk menyelesaikan isu ini, cara yang mudah dan berkesan penyelesaiannya ialah dengan membalut div kedua dalam div lain:</p>
<pre class="brush:php;toolbar:false"><div>
<p>Dalam kod yang disemak ini, div pembalut sifat padding-top mentakrifkan ruang antara pembalut dan kandungannya. Yang penting, padding ini digunakan secara dalaman, bermakna ia tidak menjejaskan sebarang elemen luaran, seperti div terapung. Akibatnya, div kedua kini diasingkan dengan betul daripada div terapung, walaupun gangguan div terapung dalam aliran biasa.</p>
<h3 id="Kesimpulan">Kesimpulan</h3>
<p>Memahami aliran CSS dan kesan unsur terapung ialah penting dalam reka bentuk susun atur. Dengan memahami konsep ini dan menggunakan penyelesaian yang sesuai, seperti membungkus elemen dengan padding dalaman, anda boleh memastikan halaman web anda dipaparkan seperti yang dimaksudkan, walaupun apabila unsur terapung hadir.</p>
</div>