Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Apakah kod untuk mengosongkan terapung dalam css3

Apakah kod untuk mengosongkan terapung dalam css3

WBOY
WBOYasal
2022-04-11 18:14:174685semak 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.

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 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn