Apakah Tujuan 'clear:both' dalam CSS?

Memahami Peranan "clear:both" dalam CSS

Apabila halaman web mempunyai elemen yang terapung ke kiri atau kanan, ia boleh menyebabkan unsur-unsur seterusnya mengalir di sekelilingnya. Untuk mengelakkan ini, CSS menyediakan sifat "jelas", yang boleh ditetapkan ke bahagian tertentu (kiri, kanan) atau kepada "kedua-duanya".

Apakah Penggunaan "clear:both" ?

"clear:both" mengarahkan elemen untuk menjatuhkan di bawah mana-mana elemen terdahulu yang telah diapungkan ke kiri dan kanan. Ini membolehkan ia bermula pada baris baharu, mengosongkan sebarang jidar atau pelapik yang mungkin membalut elemen terapung.

Bagaimanakah "clear:both" Berfungsi?

Dalam aliran dokumen biasa, elemen disusun secara menegak, dengan kandungan mengalir di sekelilingnya. Walau bagaimanapun, apabila elemen terapung, ia beralih sama ada ke kiri atau kanan, membenarkan kandungan lain mengalir di bawahnya. "clear:both" memberitahu elemen semasa untuk bermula di bawah mana-mana elemen terapung sebelum ini pada kedua-dua belah.

Contoh Penggunaan

Pertimbangkan kod HTML berikut:

<div>

Dalam contoh ini, div "Left float" diapungkan ke kiri, menyebabkan teks "This is a paragraph" dibalut sekelilingnya. Div "Kosongkan kedua-duanya" kemudian digunakan untuk mengosongkan kedua-dua bahagian kiri dan kanan, membenarkan teks "Ini adalah perenggan baharu" muncul di bawahnya dalam baris baharu.

Kesimpulan

Dengan menetapkan "clear:both" pada elemen, anda boleh memastikan ia bermula pada baris baharu di bawah mana-mana elemen terapung sebelum ini, memastikan konsisten dan terkawal susun atur.

Atas ialah kandungan terperinci Apakah Tujuan 'clear:both' dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!