Mengapa Teks Membungkus Elemen Terapung?

Barbara Streisand
Lepaskan: 2024-10-30 13:49:26
asal
907 orang telah melayarinya

Why Does Text Wrap Around Floated Elements?

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>
Salin selepas log masuk
<code class="css">.float {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}

.blue {
  width: 200px;
  height: 200px;
  background: blue;
}</code>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!