float clear html

Dalam pembangunan web, masalah susun atur yang disebabkan oleh unsur terapung sering dihadapi. Elemen terapung akan terlepas daripada aliran dokumen, menyebabkan ketinggian elemen induk runtuh dan elemen adik beradik lain terjejas. Untuk menyelesaikan masalah ini, kita perlu menggunakan pembersihan terapung.

Intipati pembersihan terapung adalah untuk menjadikan elemen induk mengandungi unsur terapung dan mengira semula ketinggiannya sendiri. Kaedah pembersihan terapung biasa termasuk yang berikut.

1. Gunakan teg div kosong untuk mengosongkan terapung

Kaedah ini ialah kaedah yang paling awal dan paling biasa untuk membersihkan terapung. Tambahkan teg div kosong pada penghujung elemen terapung dan tetapkan gayanya kepada kosongkan:kedua-duanya untuk mengosongkan terapung.

.clearfix{
    clear:both;
}

Dengan menambahkan nama kelas clearfix pada elemen induk, ia mengandungi elemen terapung, dengan itu menyebabkan elemen induk mengira semula ketinggian.

Walau bagaimanapun, kaedah ini mempunyai kelemahan berikut:

• Ia akan menambah elemen DOM yang tidak bermakna
• Perlu menambah gaya tambahan
• Ia mungkin pecah Susun atur asal

Oleh itu, gunakan kaedah ini sesedikit mungkin melainkan tiada alternatif lain yang lebih baik.

2. Menggunakan BFC

BFC (konteks pemformatan peringkat blok) ialah konsep reka letak yang penting dalam Web. BFC boleh membungkus elemen ke dalam blok susun atur bebas dengan ciri-ciri berikut:

• Kotak dalaman akan diletakkan satu demi satu dalam arah menegak.
• Jarak menegak Kotak ditentukan oleh jidar. Jidar dua kotak bersebelahan kepunyaan BFC yang sama akan bertindih.
• Kawasan BFC tidak akan bertindih dengan kotak apungan.
• BFC ialah bekas bebas pada halaman Elemen luaran tidak akan menjejaskan Kotak di dalamnya, dan begitu juga sebaliknya.
• Apabila mengira ketinggian BFC, elemen terapung turut mengambil bahagian dalam pengiraan.

Dengan menetapkan BFC kepada elemen induk, apungan elemen anak boleh dikosongkan.

Kaedah 1:

.container{
    overflow: hidden;
}

Kaedah 2:

.container{
    display: flow-root;
}

Walaupun kaedah ini tidak memerlukan penambahan elemen DOM tambahan, ia memerlukan pemahaman tertentu tentang ciri-ciri BFC, dan pada masa yang sama Kesan BFC terhadap susun atur juga perlu dipertimbangkan.

3. Gunakan elemen pseudo untuk mengosongkan terapung

Mencapai kesan pembersihan terapung dengan menambah elemen pseudo selepas elemen terapung. Kaedah pelaksanaan khusus adalah seperti berikut:

.clearfix::after{
    content:"";
    display:block;
    clear:both;
}

Dengan menambahkan nama kelas clearfix pada elemen induk, apungan boleh dikosongkan.

Walaupun kaedah ini memerlukan penambahan gaya tambahan, ia tidak akan menambah elemen DOM yang tidak bermakna dan tidak akan menjejaskan reka letak.

4. Gunakan susun atur fleksibel

Susun atur fleksibel ialah kaedah reka letak baharu dalam CSS3. Menggunakan susun atur fleksibel boleh menyelesaikan beberapa masalah susun atur dengan mudah, seperti pemusatan mendatar, pemusatan menegak, dsb.

Apungan juga boleh dikosongkan menggunakan susun atur fleksibel Kaedah pelaksanaan khusus adalah seperti berikut:

.container{
    display: flex;
    flex-wrap: wrap;
}

Dengan menetapkan elemen induk sebagai bekas fleksibel, elemen anak secara automatik akan menjadi item fleksibel dan boleh. dilalui melalui pembungkusan garisan kawalan harta benda flex-wrap. Disebabkan oleh ciri-ciri susun atur fleksibel, elemen induk akan mengandungi semua elemen anak dan mengira semula ketinggiannya sendiri untuk mencapai kesan membersihkan terapung.

Walau bagaimanapun, perlu diingatkan bahawa menggunakan susun atur fleksibel boleh memusnahkan reka letak asal, jadi ia perlu dilaraskan mengikut keperluan sebenar.

Ringkasan

Di atas memperkenalkan kaedah penjelasan terapung yang biasa. Setiap kaedah mempunyai kelebihan dan kekurangannya Pilih penyelesaian yang paling sesuai mengikut keperluan sebenar anda. Tetapi tidak kira kaedah mana yang digunakan, anda perlu memberi perhatian untuk membersihkan terapung tanpa memusnahkan susun atur asal.

Atas ialah kandungan terperinci float clear html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!