Rumah > Artikel > hujung hadapan web > Apakah kod untuk mengosongkan terapung dalam css3
Apakah kod untuk mengosongkan terapung dalam css3
- WBOYasal
- 2022-04-11 18:14:174611semak imbas
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.
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 dc6dce4a544fdca2df29d5ac0ea9906b dan e388a4556c0f65e1904146cc1a846bee 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>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>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>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!