Apakah beberapa cara untuk mengosongkan terapung dalam css3

Kaedah: 1. Tetapkan gaya "clear:both" dalam teg div kosong untuk mengosongkan apungan; -elemen untuk mengosongkan apungan; 3. Tetapkan gaya limpahan kepada elemen induk, dan apungan boleh dikosongkan walaupun nilai atribut tidak kelihatan.

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.

Apakah beberapa cara untuk mengosongkan terapung dalam css3

Apungan (float) boleh mengawal kotak terapung untuk bergerak ke kiri dan ke kanan sehingga ia bertemu dengan kotak terapung lain atau kotak yang mengandungi di bahagian luarnya? tepi. Kotak terapung tidak tergolong dalam aliran biasa dalam aliran dokumen Apabila elemen terapung, ia tidak akan menjejaskan reka letak elemen peringkat blok, tetapi hanya akan menjejaskan reka letak elemen sebaris.

Pada masa ini, aliran biasa dalam aliran dokumen akan menunjukkan bahawa kotak terapung tidak mempunyai mod susun atur yang sama. Apabila ketinggian kotak yang mengandungi lebih kecil daripada kotak terapung, "height collapse" akan berlaku:

Ketinggian unsur induk dalam gambar di atas disebabkan oleh pelapik Kesannya ialah elemen induk tidak mempunyai set ketinggian.

Apabila ketinggian elemen induk tidak ditetapkan:

Jika elemen anak dalam elemen induk tidak ditetapkan untuk terapung, ketinggian elemen induk akan dikembangkan secara automatik dan nilai ketinggian akan muncul;

Jika elemen anak dalam elemen induk ditetapkan untuk terapung, ketinggian elemen induk tidak akan dikembangkan secara automatik dan tiada nilai ketinggian.

Jelas sekali terdapat beberapa masalah selepas menetapkan apungan dengan cara ini, seperti:

Jing bagi elemen induk terjejas dan ia tidak boleh dipusatkan ke atas, bawah, kiri dan kanan .

Jika ketinggian tidak ditetapkan untuk elemen induk , ketinggian elemen induk tidak dikembangkan selepas terapung, maka elemen induk tidak akan dipaparkan pada paparan.

Bagaimana untuk mengosongkan terapung dalam css? Apakah beberapa cara untuk membersihkan terapung?

(1) Gunakan clear:kedua-duanya untuk mengosongkan terapung

Letakkan teg div kosong dalam kod, dan kemudian tetapkan clear:kedua-duanya pada teg ini. Kosongkan kesan terapung pada halaman. Kelebihannya adalah kesederhanaan, kemudahan dan keserasian yang baik, tetapi secara amnya tidak disyorkan untuk menggunakan kaedah ini kerana ia akan menyebabkan kekeliruan struktur dan tidak kondusif untuk penyelenggaraan kemudiannya

<div style="clear: both"></div>

(2) Gunakan pseudo elemen: selepas mengosongkan apungan

Menambah elemen pseudo:selepas pada elemen induk Dengan mengosongkan apungan unsur pseudo, tujuan menyokong ketinggian elemen induk tercapai.

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

(3) Gunakan atribut limpahan CSS

Apabila menetapkan gaya limpahan untuk elemen induk, sama ada limpahan:tersembunyi atau limpahan:auto, anda boleh mengosongkan apungan selagi nilainya tidak kelihatan , intipatinya adalah untuk membina BFC, untuk mencapai kesan menyokong ketinggian elemen induk

.box{border:1px solid #ccc;background:#eff2f4;overflow: auto}

(Perkongsian video pembelajaran. : tutorial video css)

Atas ialah kandungan terperinci Apakah beberapa cara untuk mengosongkan terapung dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!