Rumah  >  Artikel  >  hujung hadapan web  >  Mengapa Elemen Terapung Nampak Tidak Menjejaskan Lebar Div?

Mengapa Elemen Terapung Nampak Tidak Menjejaskan Lebar Div?

DDD
DDDasal
2024-10-31 07:26:02784semak imbas

Why Does a Floated Element Appear to Not Affect Div Width?

Gelagat Apung CSS: Memahami Pemeliharaan Lebar Div

Apabila menggunakan sifat float:left pada elemen HTML, elemen berikut dijangka akan ditolak ke kiri daripada membalut ke baris baru. Walau bagaimanapun, dalam keadaan tertentu, nampaknya lebar div tidak terjejas.

Dalam contoh yang diberikan, kandungan div kedua (dengan class="kuning") dijajarkan dengan betul, tetapi div itu sendiri masih menjangkau lebar penuh bekas. Tingkah laku ini berpunca daripada sifat asas kedudukan terapung.

Apabila elemen terapung, ia dialih keluar daripada aliran biasa dokumen. Walau bagaimanapun, ruang yang diduduki oleh elemen terapung masih "terpelihara" oleh elemen berikutnya yang akan menduduki ruang tersebut.

Tempahan ruang ini didokumenkan dalam spesifikasi CSS, yang menyatakan bahawa blok tidak diposisikan- elemen tahap (seperti div) merawat terapung seolah-olah ia tidak wujud dari segi susun atur menegak. Walau bagaimanapun, kotak garisan (kawasan segi empat tepat yang mengandungi teks) dipendekkan untuk menampung kotak margin apungan.

Akibatnya, kandungan elemen seterusnya mengalir ke bawah bahagian apungan, tetapi lebarnya bekas (ditentukan oleh elemen tidak terapung berikut) kekal dikhaskan.

Untuk menangani isu ini, satu penyelesaian ialah menggunakan sifat limpahan (seperti limpahan: tersembunyi) pada elemen seterusnya. Dengan berbuat demikian, anda mewujudkan konteks pemformatan blok baharu, yang menghalang elemen daripada bertindih dengan kotak margin elemen terapung. Ini memaksa elemen seterusnya mengecil kepada saiz yang tidak bertindih dengan pelampung.

Atas ialah kandungan terperinci Mengapa Elemen Terapung Nampak Tidak Menjejaskan Lebar Div?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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