Apakah kod untuk mengosongkan terapung dalam css3-Soal Jawab bahagian hadapan-php.cn

Apakah kod untuk mengosongkan terapung dalam css3

WBOY

Lepaskan： 2022-04-11 18:37:25

asal

4686 orang telah melayarinya

Kodnya ialah: 1. ".clear{clear:both}", menetapkan bahawa elemen tidak terapung ke kiri dan kanan; 2. "overflow:auto", menetapkan kandungan untuk dipangkas kepada clear floating ; 3. "Elemen: selepas{ display:table;}", tetapkan elemen untuk dipaparkan sebagai jadual peringkat blok, dan kosongkan apungan apabila ruang yang tinggal diisi.

Apakah kod untuk mengosongkan terapung dalam css3

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

Apakah kod untuk mengosongkan terapung dalam css3

Kaedah 1: Gunakan elemen kosong dengan atribut yang jelas

Gunakan tag kosong untuk mengosongkan floats : Tambah teg kosong (secara teorinya ia boleh menjadi sebarang teg, tetapi

dan

biasanya digunakan) selepas semua elemen terapung di dalam elemen induk yang perlu dikosongkan untuk mengosongkan terapung dan tentukan CSS kod jelas untuknya: kedua-duanya.

Contoh kod:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo{
width: 500px;
margin: 50px auto;
background-color: #CCCCCC;
}
.left{
width: 100px;
height: 100px;
float: left;
background-color: #21B4BB;
}
.right{
width: 100px;
height: 50px;
float: right;
background-color: #21B4BB;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="demo">
<div class="left">left</div>
<div class="right">right</div>
<div class="clear"></div>
</div>
</body>
</html>

Salin selepas log masuk

Kelebihan: Mudah, kurang kod, keserasian penyemak imbas yang baik.

Kelemahan: Sebilangan besar elemen html tidak semantik perlu ditambah, kod itu tidak cukup elegan, dan tidak mudah untuk dikekalkan kemudian.

Kaedah 2: Gunakan sifat limpahan CSS

Gunakan limpahan untuk mengosongkan apungan: Hanya tentukan kod CSS overflow:auto atau overflow:hidden dalam elemen di mana apungan perlu dibersihkan.

Contoh kod:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo{
width: 500px;
margin: 50px auto;
background-color: #CCCCCC;
overflow:hidden
}
.left{
width: 100px;
height: 100px;
float: left;
background-color: #21B4BB;
}
.right{
width: 100px;
height: 50px;
float: right;
background-color: #21B4BB;
}
</style>
</head>
<body>
<div class="demo">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>

Salin selepas log masuk

Kelebihan: Tiada masalah struktur dan semantik, dan jumlah kod adalah sangat kecil

Kelemahan: Apabila kandungan bertambah, ia mudah menyebabkan pembalut baris automatik. Kandungan tersembunyi dan elemen yang perlu melimpah tidak boleh dipaparkan

Kaedah 3: Gunakan CSS's :after pseudo-element

Gunakan elemen pseudo :selepas pada elemen induk dan tetapkan paparan :jadual.

display:table menyebabkan elemen yang dijana dipaparkan dalam jadual peringkat blok, menduduki ruang yang tinggal.

Jana kandungan sebagai elemen terakhir melalui kandungan: " " Bagi kandungan, CSS klasik ialah kandungan: ".".

Contoh kod:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo{
width: 500px;
margin: 50px auto;
background-color: #CCCCCC;
*zoom: 1;
}
.demo:after { 
content: " ";
display: table; 
clear: both;  
}  
.left{
width: 100px;
height: 100px;
float: left;
background-color: #21B4BB;
}
.right{
width: 100px;
height: 50px;
float: right;
background-color: #21B4BB;
}
</style>
</head>
<body>
<div class="demo">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>

Salin selepas log masuk

Kelemahan: sesuai untuk pelayar moden, tidak menyokong IE6/7, *zoom: 1 adalah serasi dengan IE6/7

(video pembelajaran Kongsi: tutorial video css)

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