Apa itu terapung?
float adalah terapung Fungsinya dalam CSS adalah untuk mengeluarkan elemen daripada aliran dokumen biasa dan mengalihkannya ke "paling kiri" atau "paling kanan" elemen induknya. Yang berikut menerangkan konsep beberapa kata nama dalam takrif ini:
Aliran dokumen: Dalam HTML, aliran dokumen ialah susunan unsur-unsur disusun dari atas ke bawah.
Keluar daripada aliran dokumen: elemen ditarik keluar daripada susunan biasanya.
Paling kiri/paling kanan: Pergerakan yang disebut di atas ke paling kiri dan paling kanan elemen induk bermakna elemen itu bergerak ke kiri atau kanan sehingga ia mencecah elemen terapung lain atau sempadan kawasan kandungan elemen induk (tidak termasuk pelapik ).
atribut terapung:
① kiri: Unsur terapung ke kiri.
② kanan: Unsur terapung ke kanan.
③ tiada: Nilai lalai.
④ mewarisi: Mewarisi atribut apungan daripada elemen induk.
Contoh: Terapung ke kiri
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>float属性</title>
<style type="text/css">
#a
{
background-color:Red;
height:50px;
width:100px;
}
#b
{
background-color:Yellow;
height:50px;
width:200px;
float:left;
}
#c
{
background-color:Blue;
height:50px;
width:300px;
}
#d
{
background-color:Gray;
height:50px;
width:400px;
}
</style>
</head>
<body>
<div id="a">div-a</div>
<div id="b">div-b</div>
<div id="c">div-c</div>
<div id="d">div-d</div>
</body>
</html>Contoh: Terapung ke kanan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>float属性</title>
<style type="text/css">
#a
{
background-color:Red;
height:50px;
width:100px;
}
#b
{
background-color:Yellow;
height:50px;
width:200px;
float:right;
}
#c
{
background-color:Blue;
height:50px;
width:300px;
}
#d
{
background-color:Gray;
height:50px;
width:400px;
float:right;
}
</style>
</head>
<body>
<div id="a">div-a</div>
<div id="b">div-b</div>
<div id="c">div-c</div>
<div id="d">div-d</div>
</body>
</html>
Elemen terapung bersebelahan antara satu sama lain
Jika anda meletakkan beberapa elemen terapung bersama, ia akan bersebelahan jika ada kelapangan.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>float属性</title>
<style type="text/css">
#a
{
background-color:Red;
height:50px;
width:100px;
}
#b
{
background-color:Yellow;
height:50px;
width:200px;
}
#c
{
background-color:Blue;
height:50px;
width:300px;
}
#d
{
background-color:Gray;
height:50px;
width:400px;
}
div
{
float:left;
}
</style>
</head>
<body>
<div id="a">div-a</div>
<div id="b">div-b</div>
<div id="c">div-c</div>
<div id="d">div-d</div>
</body>
</html>
Clear float - Selepas menggunakan clear
untuk mengapungkan elemen, elemen sekeliling akan disusun semula untuk mengelakkan ini, gunakan clear atribut . Atribut
jelas menyatakan bahawa unsur terapung tidak boleh muncul pada kedua-dua belah elemen.
bahagian seterusnya