Articles
Pengenalan ke CSS
Properti CSS Terkait Float

Properti CSS Terkait Float

Artikel ini menjelaskan properti CSS yang terkait dengan float.

Anda dapat mempelajari penggunaan dan sintaks dari properti float dan clear.

YouTube Video

HTML untuk Pratinjau

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        </article>
38    </main>
39</body>
40</html>

Properti CSS Terkait Float

Properti float dan clear 

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

float adalah salah satu properti CSS yang digunakan untuk membuat elemen mengambang ke kiri atau kanan di dalam elemen induknya, sehingga elemen lain dapat mengelilinginya. Properti float sering digunakan untuk meletakkan gambar atau elemen kotak di sekitar teks, tetapi penggunaannya menurun karena metode tata letak terbaru seperti flex dan grid telah menjadi umum.

  • Dalam kelas float-left, properti float diatur ke left. Elemen yang diterapkan mengambang ke sisi kiri elemen induk, dan elemen berikutnya mengelilinginya ke kanan.
  • Dalam kelas clearfix, properti clear diatur ke both. Menggunakan kelas ini mencegah elemen berikutnya mengelilingi elemen yang mengambang. Di sini, kami mencegah elemen berikutnya mengambang setelah gambar untuk mempertahankan tata letak.

Cara menggunakan float

Nilai
  • left: Membuat elemen mengambang ke kiri, memungkinkan elemen lainnya mengelilinginya di sebelah kanan.
  • right: Membuat elemen mengambang ke kanan, memungkinkan elemen lainnya mengelilinginya di sebelah kiri.
  • none: Ini adalah nilai default dan tidak membuat elemen mengambang.
  • inherit: Mewarisi nilai properti float dari elemen induk.
Properti clear
  • Ketika menggunakan float, elemen berikutnya mungkin mengelilingi elemen yang mengambang. Untuk mencegah ini, properti clear digunakan. Nilai untuk clear adalah sebagai berikut:.
    • left: Menghindari elemen yang mengambang di sebelah kiri.
    • right: Menghindari elemen yang di-float ke kanan.
    • both: Menghindari elemen yang di-float ke kiri dan kanan.
    • none: Memungkinkan elemen untuk melayang di sekitarnya. Ini adalah nilai default.

Catatan

  • Saat menggunakan float, mungkin ada masalah di mana tinggi elemen induk mengabaikan tinggi elemen yang di-float. Untuk menghindari ini, gunakan teknik clearfix atau overflow: hidden; pada elemen induk.
  • Dalam desain responsif atau tata letak yang kompleks, float bisa lebih sulit ditangani dibandingkan dengan flex atau grid, sehingga disarankan untuk menggunakan flex atau grid.
Ringkasan

float adalah teknik lama untuk mengapungkan elemen ke kiri atau kanan, memungkinkan teks atau elemen lain mengelilinginya, dan masih kadang digunakan untuk tata letak sederhana atau pengaturan gambar. Namun, untuk membuat tata letak yang lebih fleksibel dan mudah, disarankan menggunakan flexbox atau grid.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Properti CSS Terkait Antarmuka Pengguna