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:

< head>

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

 

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>



.box{ width:300px;margin:0 auto;border:10px solid #000;}
.div{ width:200px;height:200px;background:red;float:left;}
/*
Float löschen
1. Fügen Sie einen Float zum übergeordneten Element hinzu
2. Fügen Sie display:inline-block zum übergeordneten Element hinzu
3. Fügen Sie

hinzu schwebendes Element

.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

< div class="div">

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;}



< div class= "box">