Bagaimana untuk mengosongkan terapung dalam css

Cara mengosongkan terapung dalam css: 1. Tambahkan teg div kosong dengan set gaya "clear:both" selepas kod terapung. 2. Tambahkan elemen pseudo selepas dengan gaya "clear:both;" pada elemen induk. 3. Tetapkan gaya "overflow: auto" kepada elemen induk.

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

Apabila kita menulis kod, kadangkala sesetengah elemen pada halaman tidak dapat dipaparkan dengan betul kerana penggunaan elemen apungan.

Tetapi selepas menggunakan elemen terapung terapung, akan ada beberapa kesan buruk:

(1) Memandangkan elemen terapung terkeluar daripada aliran dokumen, ketinggian elemen induk tidak boleh dikembangkan, yang mempengaruhi Elemen pada tahap yang sama dengan elemen induk
(2) Elemen tidak terapung pada tahap yang sama dengan elemen terapung akan mengikuti, kerana elemen terapung meninggalkan aliran dokumen dan tidak menduduki kedudukan asalnya
(3) Jika elemen terapung bukan yang pertama Jika elemen terapung ialah elemen terapung, elemen sebelum itu juga perlu terapung, jika tidak, ia akan menjejaskan paparan struktur halaman dengan mudah

Pada masa ini , elemen terapung perlu dikosongkan Berikut ialah beberapa kaedah CSS untuk mengosongkan elemen 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 clearfix Untuk mengosongkan terapung

Tambahkan :selepas pseudo-elemen pada elemen induk Dengan mengosongkan terapung 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:hidden 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
}

(Video pembelajaran. perkongsian: tutorial video css)

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