CSS Float
Apakah CSS Float?
CSS Float akan menggerakkan elemen ke kiri atau kanan, dan elemen sekeliling juga akan disusun semula.
Float sering digunakan untuk imej, tetapi ia juga sangat berguna dalam reka letak.
Cara elemen terapung
Unsur terapung secara mendatar, yang bermaksud elemen itu hanya boleh bergerak ke kiri dan ke kanan tetapi tidak ke atas dan ke bawah.
Elemen terapung akan bergerak sejauh kiri atau kanan yang mungkin sehingga tepi luarnya menyentuh sempadan kotak yang mengandungi atau kotak terapung lain.
Elemen selepas elemen terapung akan mengelilinginya.
Elemen sebelum elemen terapung tidak akan terjejas.
Atribut terapung apungan CSS
Artikel ini terutamanya memperkenalkan atribut apungan: mentakrifkan arah unsur terapung.
1. Kaedah reka letak halaman: Memperkenalkan aliran dokumen, lapisan terapung dan atribut terapung.
2. float:left: Memperkenalkan kaedah reka letak apabila float dibiarkan.
3. float:right: Memperkenalkan kaedah reka letak apabila float adalah betul.
4. Elemen bersebelahan mengandungi atribut apungan: Memperkenalkan kaedah reka letak apabila elemen bersebelahan mengandungi atribut apungan.
1. Kaedah reka letak halaman
Kaedah reka letak halaman, terutamanya termasuk: aliran dokumen, lapisan terapung, atribut terapung.
1.1 Aliran dokumen
Aliran dokumen standard (susun atur lalai) halaman HTML ialah: dari atas ke bawah, dari kiri ke kanan, dengan pemisah baris apabila menghadapi blok (elemen peringkat blok) .
1.2 Lapisan terapung
Lapisan terapung: Selepas memberikan nilai kepada atribut apungan elemen, ia dipisahkan daripada aliran dokumen dan terapung ke kiri dan kanan, dekat dengan sempadan kiri dan kanan daripada elemen induk (lalai ialah kawasan teks badan) .
Elemen terapung diisi oleh elemen (tidak terapung) berikutnya dalam kedudukan kosong aliran dokumen: elemen peringkat blok diisi secara langsung Jika ia bertindih dengan julat elemen terapung, terapung elemen meliputi elemen peringkat blok. Elemen sebaris: Sisipkannya jika terdapat sebarang ruang.
1.3 Pengenalan kepada atribut terapung
① kiri: Elemen terapung ke kiri.
② kanan: Unsur terapung ke kanan.
③ tiada: Nilai lalai.
④ mewarisi: Mewarisi atribut apungan daripada elemen induk.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2.3-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;
}
</style>
</head>
<body>
<div id=a >div-a</div>
<div id=b>div-b</div>
<div id=c>div-c</div>
<input type="text" value="input1" />
<input type="text" value="input2" />
<input type="text" value="input3 " />
<div id=d>div-d</div>
<input type="text" value="input4 " />
</body>
</html>
bahagian seterusnya