CSS - Properti Float: Panduan untuk Pemula

Hai teman-teman, para ahli CSS masa depan! Hari ini, kita akan masuk ke dunia magis properti float CSS. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - pada akhir panduan ini, Anda akan mampu mengaplikasikan float pada elemen seperti seorang pro!

CSS - Float

Apa Itu Properti Float?

Sebelum kita melompat ke dalam, mari mulai dari dasar. Properti float adalah seperti tongkat sihir dalam CSS yang memungkinkan elemen untuk mengambang ke kiri atau kanan dari wadahnya. Bayangkan Anda menata furniture di dalam ruangan - properti float memungkinkan Anda mendorong hal-hal ke sisi, membuat ruang untuk elemen lain untuk mengalir di sekitarnya.

Nilai yang Mungkin

Properti float dapat mengambil beberapa nilai, masing-masing dengan kekuatan khususnya:

Nilai	Deskripsi
left	Mengambangkan elemen ke kiri
right	Mengambangkan elemen ke kanan
none	Elemen tidak mengambang (default)
inherit	Mewarisi nilai float dari parent

Diterapkan Pada

Properti float dapat diterapkan ke sebagian besar elemen HTML, tapi biasanya digunakan dengan:

Gambar
Div
Paragraf
Judul

Sintaks

Berikut adalah sintaks dasar untuk menggunakan properti float:

selector {
float: value;
}

Misalnya:

img {
float: left;
}

Ini akan membuat semua gambar di halaman Anda mengambang ke kiri.

CSS Float - Kolom Lebar Sama

mari mulai dengan contoh praktis. Bayangkan Anda membuat website untuk sebuah toko roti, dan Anda ingin menampilkan tiga jenis kue sepanjangnya. Berikut adalah cara Anda dapat menggunakan float untuk membuat kolom lebar sama:

<div class="pastry-container">
<div class="pastry">Croissants</div>
<div class="pastry">Éclairs</div>
<div class="pastry">Macarons</div>
</div>

.pastry-container {
width: 100%;
}

.pastry {
float: left;
width: 33.33%;
padding: 15px;
box-sizing: border-box;
}

Dalam contoh ini, kita mengambangkan setiap div kue ke kiri dan memberikan lebar 33.33% (100% dibagi 3). box-sizing: border-box memastikan bahwa padding dimasukkan dalam perhitungan lebar.

CSS Float - Kolom Tinggi Sama

Sekarang, katakanlah Anda ingin kolom ini memiliki tinggi sama, tanpa menghiraukan isi. Kita dapat menggunakan trik kecil dengan padding dan margin:

.pastry-container {
overflow: hidden;
}

.pastry {
float: left;
width: 33.33%;
padding-bottom: 500px;
margin-bottom: -500px;
}

Ini menciptakan ilusi kolom tinggi sama dengan menambahkan padding bawah yang besar dan margin bawah yang sama nilainya.

CSS Float - Gambar Di Samping yang Lain

Mari menambahkan beberapa gambar kue yang membuat mulut berair ke website toko roti kita:

<div class="image-container">
<img src="croissant.jpg" alt="Croissant">
<img src="eclair.jpg" alt="Éclair">
<img src="macaron.jpg" alt="Macaron">
</div>

.image-container {
width: 100%;
}

.image-container img {
float: left;
width: 33.33%;
padding: 5px;
box-sizing: border-box;
}

Ini akan menampilkan gambar kue kita sepanjangnya, masing-masing mengambil seperempat lebar wadah.

CSS Float - Kotak Flexibel

Tapi apa bila kita ingin tata letak kita lebih fleksibel? Masukkan flexbox, superhero tata letak CSS modern:

.pastry-container {
display: flex;
flex-wrap: wrap;
}

.pastry {
flex: 1 0 300px;
margin: 5px;
}

Ini menciptakan tata letak fleksibel di mana setiap kotak kue akan memiliki lebar minimal 300px dan akan tumbuh untuk mengisi ruang yang tersedia.

CSS Float - Menu Navigasi

Floats sering digunakan untuk membuat menu navigasi horizontal. Mari membuat menu untuk toko roti kita:

<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

nav ul {
list-style-type: none;
padding: 0;
}

nav li {
float: left;
}

nav a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #333;
}

Ini menciptakan menu navigasi horizontal dengan setiap item mengambang ke kiri.

CSS Float - Tata Letak Web

Floats dapat digunakan untuk membuat keseluruhan tata letak web. Berikut adalah tata letak dua-kolom sederhana:

<div class="container">
<header>Welcome to Our Bakery</header>
<nav>
<!-- Item navigasi di sini -->
</nav>
<main>
<article>Our Story</article>
<aside>Today's Special</aside>
</main>
<footer>Contact Us</footer>
</div>

.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}

header, nav, footer {
width: 100%;
clear: both;
}

main {
width: 100%;
}

article {
float: left;
width: 70%;
}

aside {
float: right;
width: 25%;
}

Ini menciptakan tata letak dengan area konten utama dan sidebar.

CSS Float - Paragraf

Floats dapat digunakan untuk membalikkan teks di sekitar gambar:

<div class="content">
<img src="baker.jpg" alt="Our Master Baker" class="float-left">
<p>Berkenalan dengan master baker kita, Chef Pierre. Dengan lebih dari 30 tahun pengalaman...</p>
</div>

.float-left {
float: left;
margin-right: 15px;
}

Ini akan membuat teks membalikkan di sekitar gambar master baker kita.

CSS Float - Gambar Dengan Margin

Menambahkan margin ke gambar yang mengambang dapat meningkatkan keterbacaan:

img {
float: left;
margin: 0 15px 15px 0;
}

Ini menambahkan ruang sekitar gambar yang mengambang.

CSS Float - Tidak Mengambang

kadang-kadang, Anda perlu mencegah elemen dari mengambang. Properti clear datang untuk menyelamatkan:

.no-float {
clear: both;
}

Ini memastikan bahwa elemen dengan kelas no-float akan muncul di bawah elemen yang mengambang.

CSS Float - Mengambang ke Kiri atau Kanan

Ingat, Anda dapat mengambangkan elemen ke kiri atau ke kanan:

.float-left {
float: left;
}

.float-right {
float: right;
}

CSS Float - Gambar Overlapping

Hati-hati! Elemen yang mengambang dapat overlap jika tidak ada cukup ruang. Anda dapat mencegah ini dengan penjelasan yang proper:

.clearfix::after {
content: "";
display: table;
clear: both;
}

Tambahkan kelas ini ke wadah parent dari elemen yang mengambang untuk mencegah overlapping.

CSS Float - Gambar Tidak Berdekatan

kadang-kadang, Anda ingin gambar yang mengambang tetap dalam urutan aslinya:

img {
float: left;
clear: left;
}

Ini memastikan setiap gambar dimulai di baris baru.

CSS Float - Mengambang Di Bawah Pendahannya

Untuk membuat elemen mengambang di bawah pendahannya:

.float-below {
clear: both;
float: left;
}

Ini membersihkan semua float sebelumnya dan kemudian mengambangkan elemen.

CSS Float - ke Baris Baru

Untuk memaksa elemen ke baris baru setelah elemen yang mengambang:

.new-line {
clear: both;
}

CSS Float - Nilai Terkait

Berikut adalah tabel properti dan nilai terkait float:

Properti	Values
float	left, right, none, inherit
clear	left, right, both, none, inherit
overflow	visible, hidden, scroll, auto

Dan itu adalah, teman-teman! Anda telah mengambil langkah pertama ke dunia CSS floats. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba teknik ini. Sebelum Anda sadari, Anda akan membuat tata letak yang indah, berdasarkan float, yang akan membuat desainer web yang berpengalaman merasa bangga. Selamat coding!

Credits: Image by storyset

Tutorial Sebelumnya:

CSS - Clearfix

Tutorial Selanjutnya:

CSS - Panah