Contoh 6 cara untuk mengosongkan terapung dalam html_CSS/HTML

Apa yang berlaku apabila paparan: blok sebaris digunakan:

1 Jadikan elemen blok dipaparkan dalam satu baris
2 Jadikan lebar dan tinggi sokongan sebaris
3. Pemisah baris dihuraikan
4. Apabila tidak ditetapkan, lebarnya dikembangkan oleh kandungan
5. Dalam IE6 dan 7, tag blok disokong

Kerana atribut blok sebaris ialah dihuraikan apabila garis putus (dengan jurang), jadi penyelesaiannya ialah menggunakan terapung apungan: kiri/kanan

Situasi yang berlaku apabila menggunakan apungan:

1
2. Jadikan lebar sokongan elemen sebaris
3 Apabila lebar dan tinggi tidak ditetapkan, lebar disokong oleh kandungan
4. anda boleh menggunakan apungan untuk mengosongkan jurang)
5 Tambah apungan pada elemen , akan berpisah daripada aliran dokumen dan bergerak ke arah yang ditentukan sehingga ia mencecah sempadan induk atau berhenti dengan elemen terapung yang lain (aliran dokumen ialah. kedudukan yang diduduki oleh objek yang boleh dipaparkan dalam dokumen apabila disusun)

Salin kod Kod adalah seperti berikut:

> ;

div1

div2

span1
span2
< ;/body>

Dalam kod di bawah, hanya kotak1 terapung, jadi kotak1 dan kotak2 bertindih. Jika kedua-duanya terapung, tiada pertindihan

Salin kod Kod adalah seperti berikut:

< ;!DOCTYPE HTML>



Dokumen Tidak Bertajuk

Kaedah untuk mengosongkan terapung:
1 Tambahkan terapung pada induk (dalam kes ini, jidar induk: 0 auto; tidak akan dipusatkan)

Salin kod Kod adalah seperti berikut:

Dokumen Tanpa Judul
.kotak{ width:300px;margin:0 auto;border:10px solid #000; ; }
/*
Clear float
1. Tambahkan float pada induk (tidak lagi berpusat)
*/

 

body> ;

2. Tambah paparan:inline-block; berpusat )

Salin kod Kod adalah seperti berikut:

 

3. Fügen Sie

.clear{ height:0px unter dem schwebenden Element ;font hinzu -size:0;clear:both;} Unter IE6 hat das Blockelement jedoch eine Mindesthöhe, das heißt, wenn height

Code kopieren Der Code lautet wie folgt:

< ;html>

unter dem schwebenden Element .clear{ height:0px;font-size: hinzu. 0 ;clear:both;}
*/

 

4. Fügen Sie

Code kopieren Der Code lautet wie folgt:

.clear{ height:0px;font-size:0;clear:both;}
4. Fügen Sie

unter dem hinzu schwebendes Element */

 

   

5. Fügen Sie {zoom:1;}

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

Code kopieren

Der Code lautet wie folgt:

Dokumen Tidak Bertajuk

.clear{ height:0px;font-size:0;clear:both;}
4. Tambahkan


5. Tambahkan {zoom:1;}
pada induk unsur terapung :after{content:""; display:block;clear:both;}

**Di bawah IE6 dan 7, tidak perlu mengosongkan float jika induk elemen terapung mempunyai lebar

Haslayout mengira semula lebar dan ketinggian elemen berdasarkan saiz kandungan elemen atau saiz ibu bapa ibu bapa

paparan: blok sebaris
ketinggian: (sebarang nilai kecuali auto)
apungan: (kiri atau kanan)
lebar: (sebarang nilai kecuali auto)
zum: (kecuali biasa Sebarang nilai)
*/

6 .Tambah limpahan:auto;

Salin kod Kod adalah seperti berikut:

Dokumen Tidak Bertajuk

.kotak{ lebar:300px;sempadan:1px pepejal #000;overflow:auto;}
. div1{ lebar:260px;tinggi:400px;latar belakang:Merah;apung:kiri;}