Mengapa Elemen Terapung Saya Tidak Sejajar dengan Betul?

Jangkaan lwn. Realiti Gelagat Terapung CSS

Dalam CSS, sifat apungan biasanya digunakan untuk menjajarkan elemen secara mendatar. Walau bagaimanapun, mungkin terdapat gelagat yang tidak dijangka apabila menggunakannya bersama elemen lain.

Isunya

Contoh berikut menggambarkan salah faham yang biasa:

<code class="html"><div class="inline">
    first line<br>
    second line<br>
    third line<br>
</div>

<div class="yellow">floated div</div></code>

<code class="css">.inline {
    float:left;
}

.yellow {
    background-color:yellow;
}</code>

Dalam contoh ini, anda mungkin menjangkakan div kedua (dengan latar belakang kuning) untuk menjajarkan ke kanan div pertama. Walau bagaimanapun, seperti yang dilihat dalam contoh langsung, ia masih menempati keseluruhan lebar bekasnya.

Memahami Tingkah Laku

Tingkah laku ini sebenarnya adalah hasil yang dimaksudkan daripada kedudukan terapung . Apabila elemen diapungkan, kandungan seterusnya mengalir ke bahagian kanan elemen itu. Walau bagaimanapun, lebar blok yang mengandungi (ditetapkan oleh elemen berikut) masih terpelihara.

Mengikut spesifikasi CSS, elemen peringkat blok (seperti div dan p) yang tidak diletakkan abaikan pelampung. Kotak garisan, sebaliknya, mengalir di sepanjang sisi pelampung, tetapi lebarnya dipendekkan.

Penyelesaian

Untuk mencapai hasil yang diharapkan, di mana div kedua dijajarkan dengan betul, anda boleh menambah sifat limpahan dengan nilai selain daripada kelihatan kepada div kedua. Ini menghalangnya daripada bertindih dengan elemen terapung, seperti yang dinyatakan dalam spesifikasi CSS tahap 2.1.

Contoh

<code class="css">.yellow {
    overflow: hidden;
}</code>

Dengan penambahan ini, div kedua tidak lagi melangkaui elemen terapung, mencipta penjajaran yang diingini.

Tujuan Bertindih

Bertindih berguna dalam situasi di mana kandungan seterusnya cukup panjang untuk meneruskan melepasi elemen terapung. Jika pertindihan dihadkan secara lalai, kandungan tidak akan diteruskan di bawah elemen terapung, mewujudkan hasil yang tidak dijangka.

Atas ialah kandungan terperinci Mengapa Elemen Terapung Saya Tidak Sejajar dengan Betul?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!