masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

CSS Float(float)

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>


Meneruskan pembelajaran
||
<!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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492413 permainan