Articles
Pengenalan kepada CSS
Sifat CSS Berkaitan Float

Sifat CSS Berkaitan Float

Artikel ini menerangkan sifat CSS yang berkaitan dengan float.

Anda boleh mempelajari tentang kegunaan dan sintaks sifat float dan clear.

YouTube Video

HTML untuk Pratonton

css-float.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-float.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Layout</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Layout Related Properties</h2>
20        </header>
21        <article>
22            <h3>float</h3>
23            <section style="height: auto; color: black;">
24                <header><h4>float: left</h4></header>
25                <section class="sample-view">
26                    <div class="float-left">float left</div>
27                    <div class="content">
28                        <p>
29                            paragraph 1-1
30                            paragraph 1-2
31                        </p>
32                        <p>paragraph 2</p>
33                    </div>
34                    <div class="clearfix"></div>
35                </section>
36            </section>
37            <section style="height: auto; color: black;">
38                <header><h4>float: right</h4></header>
39                <section class="sample-view">
40                    <div class="float-right">float right</div>
41                    <div class="content">
42                        <p>
43                            paragraph 1-1
44                            paragraph 1-2
45                        </p>
46                        <p>paragraph 2</p>
47                    </div>
48                    <div class="clearfix"></div>
49                </section>
50            </section>
51        </article>
52    </main>
53</body>
54</html>

Sifat CSS Berkaitan Float

Sifat float dan clear 

 1.content {
 2    width: 300px;
 3    height: 100px;
 4}
 5
 6.content p {
 7    background-color: lightblue;
 8    margin: 10px;
 9}
10
11.float-left {
12    float: left;
13    width: 150px;
14    margin-right: 20px;
15    background-color: lightblue;
16}
17
18.float-right {
19    float: right;
20    width: 150px;
21    margin-right: 20px;
22    background-color: lightblue;
23}
24
25.clearfix {
26    clear: both;
27    display: none;
28}

float adalah salah satu sifat CSS yang digunakan untuk mengapungkan elemen ke kiri atau kanan dalam elemen induknya, membolehkan elemen lain mengelilinginya. Sifat float sering digunakan untuk meletakkan imej atau elemen kotak di sekeliling teks, tetapi penggunaannya telah menurun kerana kaedah susun atur baru seperti flex dan grid menjadi arus perdana.

  • Dalam kelas float-left, sifat float ditetapkan kepada left. Elemen yang digunakan mengapung ke sebelah kiri elemen induk, dan elemen seterusnya melingkari ke kanan.
  • Kelas float-right menetapkan sifat float kepada right. Elemen yang digunakan akan terapung ke sebelah kanan induknya, dan elemen seterusnya akan membungkus di sebelah kiri.
  • Dalam kelas clearfix, sifat clear ditetapkan kepada both. Menggunakan kelas ini menghalang elemen seterusnya daripada melingkari elemen yang diapungkan.

Cara menggunakan float

Nilai
  • left: Mengapungkan elemen ke kiri, membolehkan elemen lain mengelilingi di sebelah kanan.
  • right: Mengapungkan elemen ke kanan, membolehkan elemen lain mengelilingi di sebelah kiri.
  • none: Ini adalah nilai lalai dan tidak mengapungkan elemen.
  • inherit: Mewarisi nilai sifat float daripada elemen induk.
Sifat clear
  • Apabila menggunakan float, elemen seterusnya mungkin melingkari elemen yang diapungkan. Untuk mengelakkan ini, sifat clear digunakan. Nilai untuk clear adalah seperti berikut:.
    • left: Mengelakkan elemen yang diapungkan ke kiri.
    • right: Mengelakkan elemen yang terapung ke kanan.
    • both: Mengelakkan elemen yang terapung ke kiri dan kanan.
    • none: Membolehkan elemen untuk terapung di sekeliling. Ini adalah nilai lalai.

Nota

  • Apabila menggunakan float, terdapat masalah di mana ketinggian elemen induk mengabaikan ketinggian elemen terapung. Untuk mengelakkan ini, gunakan teknik clearfix atau overflow: hidden; pada elemen induk.
  • Dalam reka bentuk responsif atau tata letak yang kompleks, float boleh menjadi lebih sukar untuk diuruskan berbanding flex atau grid, jadi penggunaan flex atau grid adalah disyorkan.
Ringkasan

float adalah teknik lama untuk mengapungkan elemen ke kiri atau kanan, membenarkan teks atau elemen lain untuk melingkari, dan ia masih kadang-kadang digunakan untuk tata letak ringkas atau pembungkusan imej. Walau bagaimanapun, untuk menghasilkan tata letak yang lebih fleksibel dan mudah, flexbox atau grid adalah disyorkan.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Sifat CSS Berkaitan dengan Antara Muka PenggunaGambaran Keseluruhan Reka Bentuk Responsif dalam CSS