Mengapa Teks Membungkus Elemen Terapung?

Anomali Pembungkusan Teks: Mengapa Teks Mengalir Di Sekitar Terapung?

Apabila meletakkan elemen pada halaman web, gelagat lalai unsur HTML ialah untuk mengalir dari atas ke bawah, seperti yang dinyatakan dalam aliran dokumen biasa. Walau bagaimanapun, apabila sifat terapung digunakan pada elemen, tingkah laku ini berubah.

Elemen Terapung: Memecah Aliran

Apung meletakkan elemen di sebelah kiri atau kanan daripada bekasnya, menyebabkan teks dan elemen sebaris membalutinya. Ini kerana elemen terapung dialih keluar daripada aliran biasa halaman, bermakna elemen lain boleh bertindih atau bertindih olehnya, serupa dengan elemen yang diletakkan secara mutlak.

Elemen Teks dan Sebaris: Satu-satunya Pengecualian

Walaupun semua elemen lain dipengaruhi oleh kedudukan elemen terapung, teks dan elemen sebaris adalah pengecualian. Mereka terus membungkus elemen terapung, mengelakkan pertindihan.

Memahami Sifat Terapung

Menurut dokumentasi CSS:

• Apungan Sifat CSS meletakkan 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.

Berdasarkan sifat ini, kita boleh membuat kesimpulan bahawa:

• Dialih keluar daripada aliran biasa: Elemen terapung boleh bertindih atau bertindih oleh yang lain elemen dalam aliran biasa.
• Pengecualian pembalut untuk teks dan elemen sebaris: Elemen ini akan sentiasa membungkus elemen terapung, tanpa mengira kedudukannya.

Contoh dalam Tindakan

Pertimbangkan kod HTML dan CSS berikut:

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

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

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

Dalam contoh ini, div merah dengan kelas "float" akan diposisikan di sebelah kiri, manakala div biru dengan kelas "biru" akan diletakkan di bawahnya. Walau bagaimanapun, sebarang teks yang muncul di antara div merah dan biru akan membungkus div merah, mengekalkan integriti aliran teks.

Atas ialah kandungan terperinci Mengapa Teks Membungkus Elemen Terapung?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!