Bagaimanakah Harta Gaya "jelas:kedua-dua" Mempengaruhi Kedudukan Elemen?

Memahami Kesan Gaya "clear:both"

Dalam pembangunan web, mengawal kedudukan elemen pada halaman adalah penting. Satu sifat gaya penting yang memainkan peranan penting dalam hal ini ialah "jelas:keduanya."

Apakah itu "jelas"?

Sifat "jelas" mengawal bagaimana sesuatu unsur berinteraksi dengan unsur terapung sebelumnya. Apabila elemen ditetapkan kepada "kosongkan:kedua-duanya," ia memaksa elemen untuk jatuh di bawah mana-mana unsur terapung dalam bekas induk yang sama. Ini bermakna elemen akan muncul di bawah semua elemen terapung yang terdapat di hadapannya dalam kod sumber HTML.

Cara "clear:both" Berfungsi

Untuk memahami cara " clear:both" berfungsi, pertimbangkan contoh:

<div>

Jika anda mempunyai kod HTML di atas, div "Not Cleared" akan muncul di sebelah div "Left Float" kerana "float: left;" harta menjadikan div "Left Float" terapung ke kiri.

Untuk memaksa div "Not Cleared" muncul di bawah div "Left Float", anda boleh menambah "clear:both;" gayakan kepadanya:

<div>

Dalam senario ini, div "Dikosongkan" jatuh di bawah kedua-dua "Apung Kiri" dan mana-mana elemen terapung terdahulu yang lain. Ia berkelakuan seolah-olah tiada unsur terapung di atasnya, memastikan ia kelihatan di bawah semua kandungan terapung.

Variasi lain "jelas"

Selain "jelas:kedua-duanya ," anda juga boleh menggunakan "clear:left" dan "clear:right." Variasi ini mengawal bahagian mana elemen jatuh di bawah. "clear:left" memaksa elemen jatuh di bawah elemen terapung sebelumnya yang dijajarkan ke kiri, manakala "clear:right" menyasarkan elemen yang dijajarkan ke kanan.

Atas ialah kandungan terperinci Bagaimanakah Harta Gaya "jelas:kedua-dua" Mempengaruhi Kedudukan Elemen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!