clear float php

Clear float PHP

Float (float) ialah sifat yang sangat penting dalam CSS, yang boleh menjadikan elemen terapung pada halaman, menjadikan reka letak lebih fleksibel. Walau bagaimanapun, apabila kami menggunakan terapung, kami sering menghadapi masalah susun atur yang disebabkan oleh unsur terapung. Membersihkan terapung adalah salah satu kaedah yang digunakan untuk menyelesaikan masalah ini.

Apakah apungan jernih?

Apungan jelas digunakan untuk menyelesaikan masalah kesan unsur terapung pada reka letak halaman. Apabila kita menggunakan float, elemen akan terapung ke kedudukan yang ditentukan pada halaman. Elemen lain (terutamanya elemen berikutnya) mungkin kelihatan tidak teratur. Pada masa ini, kita perlu menggunakan float jelas untuk menyelesaikan masalah ini.

Dalam CSS, mengosongkan apungan ialah menggunakan atribut jelas untuk mengosongkan keadaan terapung bekas di mana elemen terapung terletak, supaya reka letak kembali kepada keadaan biasa. Apabila menggunakan clear, anda boleh menggunakan dua kaedah biasa: kaedah elemen kosong dan kaedah unsur pseudo.

Cara mengosongkan terapung menggunakan elemen kosong

Mengosongkan terapung dengan elemen kosong ialah kaedah konvensional membersihkan terapung. Prinsipnya ialah menambah elemen kosong di hujung bekas elemen terapung, kemudian tandai elemen kosong dengan clearfix, dan gunakan CSS untuk mengosongkan elemen terapung.

Berikut ialah kod sampel:

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
.clearfix {
    zoom: 1;
}

Dalam kaedah ini, kami menggunakan unsur pseudo :sebelum dan :selepas. Khususnya, kami menambah elemen kosong di hujung bekas dan menandakannya dengan teg clearfix. Kemudian gunakan CSS untuk mengosongkan pelampung. Menggunakan kaedah ini membersihkan terapung dengan baik dan tidak menjejaskan reka letak elemen lain.

Cara menggunakan elemen pseudo untuk mengosongkan terapung

Selain menggunakan elemen kosong untuk mengosongkan terapung, kita juga boleh menggunakan elemen pseudo untuk mengosongkan terapung. Prinsip kaedah ini ialah menggunakan :before pseudo-elemen dalam bekas elemen terapung dan kosongkan gaya terapung.

Berikut ialah kod sampel:

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear:both;
}

Dalam kaedah ini, kami menggunakan elemen pseudo :sebelum dan :selepas. Khususnya, kami menggunakan :before pseudo-element dalam bekas dan memberikannya gaya apungan yang jelas. Menggunakan kaedah ini membersihkan terapung dengan baik dan tidak memerlukan penambahan elemen HTML tambahan.

Nota

Apabila menggunakan pelampung jelas, kita perlu memberi perhatian kepada perkara berikut:

1. Kaedah membersihkan pelampung mesti diletakkan di belakang bekas elemen terapung , jika tidak, Membersihkan apungan tidak akan memberi kesan.
2. Elemen yang dikosongkan mesti mempunyai ketinggian yang jelas. Jika tidak, beberapa masalah pelik mungkin berlaku semasa susun atur.
3. Menggunakan elemen kosong dan menggunakan elemen pseudo untuk mengosongkan elemen terapung boleh menyelesaikan kesan unsur terapung pada reka letak halaman dengan berkesan. Walau bagaimanapun, kaedah menggunakan unsur pseudo adalah lebih ringkas dan oleh itu lebih popular di kalangan pembangun.

Ringkasan

Dalam CSS, mengosongkan terapung ialah salah satu cara penting untuk menyelesaikan masalah reka letak. Apabila menggunakan pelampung jelas, kita boleh memilih untuk menggunakan elemen kosong atau elemen pseudo. Sama ada cara, ini adalah cara yang baik untuk menyelesaikan masalah reka letak yang disebabkan oleh unsur terapung. Apabila menggunakan apungan jernih, anda perlu memberi perhatian kepada kedudukan apungan jernih, ketinggian unsur, dsb.

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