Mengapa Elemen Terapung Menyebabkan Teks Dibungkus Daripada Beralih ke Bawah?

Mengapa Teks Membungkus Elemen Terapung Daripada Bergerak Di Bawahnya?

Apabila mengapungkan div, ia mungkin kelihatan berlawanan dengan intuisi bahawa teks akan dibalut di sekelilingnya dan bukannya beralih ke bawahnya seperti unsur-unsur lain. Memahami mekanik gelagat terapung adalah penting untuk mencapai reka letak yang diingini.

Penjelasan Harta Terapung

Menurut dokumentasi CSS, sifat terapung:

"Letakkan elemen di sebelah kiri atau kanan bekasnya, membenarkan teks dan elemen sebaris membalutinya. Elemen dialih keluar daripada aliran biasa halaman, walaupun masih kekal sebagai sebahagian daripada aliran."

Ciri Utama Elemen Terapung

Dua aspek penting elemen terapung untuk dipertimbangkan:

• Dialih keluar daripada Aliran Biasa: Membolehkan elemen lain untuk bertindih atau bertindih oleh elemen terapung.
• Balut Teks: Hanya teks dan elemen peringkat sebaris akan membaluti elemen terapung.

Contoh

Dalam kod di bawah, div merah diapungkan ke kiri, menyebabkan div biru membalutnya.

<code class="css">.float {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}

.blue {
  width: 200px;
  height: 200px;
  background: blue;
}</code>

<code class="html"><div class="float"></div>
<div class="blue"></div></code>

Atas ialah kandungan terperinci Mengapa Elemen Terapung Menyebabkan Teks Dibungkus Daripada Beralih ke Bawah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!