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:
Berdasarkan sifat ini, kita boleh membuat kesimpulan bahawa:
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!