Mengapa Teks Membungkus Elemen Terapung dalam CSS?

Elemen Terapung dan Pembalut Teks

Semasa menavigasi selok-belok CSS, anda mungkin mengalami pemerhatian yang membingungkan. Membahagikan elemen dengan sifat apungan membolehkan elemen lain mengalir di bawahnya. Walau bagaimanapun, teks berkelakuan berbeza, membungkus elemen terapung dan bukannya turun di bawahnya.

Memahami Terapung

Gelagat ini adalah asas kepada cara sifat apungan itu beroperasi. Menurut dokumentasi CSS:

"Sifat CSS terapung meletakkan elemen di sebelah kiri atau kanan bekasnya, membenarkan teks dan elemen sebaris membungkusnya. Elemen dialih keluar daripada aliran biasa halaman, walaupun masih kekal sebagai sebahagian daripada aliran."

Ciri-ciri Elemen Terapung

Terapung elemen mempunyai dua ciri utama:

1. Dialih keluar daripada aliran biasa: Elemen lain boleh bertindih dengan elemen terapung atau sebaliknya, serupa dengan elemen dengan kedudukan mutlak.
2. Elemen teks dan sebaris melilit: Hanya teks dan elemen peringkat sebaris akan mengelakkan elemen terapung bertindih dan sebaliknya membungkus mereka.

Contoh Asas untuk Penjelasan

Pertimbangkan contoh ini:

<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>

Dalam susunan ini, div biru akan membungkus div merah terapung kerana ia adalah elemen peringkat teks.

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