cssfloatlayoutMenengah4 mnt baca

Float dan Clear

Teknik layout legasi: float untuk teks mengelilingi gambar, clearfix, dan kenapa kini jarang dipakai.

Apa itu float?

float awalnya dibuat untuk satu tujuan: teks mengelilingi gambar seperti di majalah.

css

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

Gambar "mengambang" ke kiri, teks mengalir di sebelah kanannya. Untuk tujuan ini, float masih valid sampai sekarang.

Masalah: induk kolaps

Elemen float keluar dari alur normal sebagian: induknya tidak lagi "melihat" tingginya, sehingga induk kolaps (tingginya 0).

html

<div class="wadah">
  <img style="float: left" src="...">
</div>
<!-- .wadah tingginya 0! -->

Solusi klasik: clearfix.

css

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

Atau cara modern yang lebih sederhana: display: flow-root pada induk membuat konteks format blok baru yang "melihat" float.

css

.wadah {
  display: flow-root; /* clearfix modern */
}

Kenapa jarang dipakai untuk layout?

Sebelum flexbox/grid, orang memakai float untuk kolom layout. Itu menyakitkan: perlu clearfix, perhitungan lebar manual, dan urutan HTML yang aneh. Jangan pakai float untuk layout kolom di era modern. Pakai untuk teks mengelilingi gambar, atau tidak sama sekali.

Catatan teknis: clear: both pada elemen berarti "jangan biarkan float di kiri-kananku". Properti ini masih berguna sesekali, misal memaksa footer turun di bawah gambar float.

Kenapa float tetap dipelajari?

Tiga alasan: (1) kamu akan menemui kode lama yang memakainya, (2) untuk teks mengelilingi gambar ia masih alat yang tepat, (3) memahami float membantumu memahami kenapa flexbox/grid diciptakan.

Contoh: artikel majalah

css

.artikel img.kanan {
  float: right;
  width: 300px;
  margin: 0 0 16px 16px;
  border-radius: 8px;
}

.artikel img.kiri {
  float: left;
  width: 300px;
  margin: 0 16px 16px 0;
  border-radius: 8px;
}

Teks mengalir mengelilingi gambar seperti majalah cetak. Untuk tujuan inilah float diciptakan dan tetap valid.

Clearfix modern vs klasik

css

/* Klasik: pseudo-element */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Modern: satu baris */
.wadah {
  display: flow-root;
}

flow-root membuat block formatting context baru yang "melihat" float di dalamnya. Lebih bersih, dukung penuh browser modern.

Jebakan

Float untuk layout kolom = jangan. Perhitungan lebar manual + clearfix + urutan HTML aneh = mimpi buruk maintenance. Itu pekerjaan flexbox/grid sekarang.

Lupa clear menyebabkan footer "naik". Elemen setelah float akan mencoba mengisi ruang di samping float. Kalau footer naik ke samping gambar, tambahkan clear: both pada footer atau clearfix pada wadah.

Tips profesional

Satu-satunya alasan memakai float saat ini: teks mengelilingi gambar. Untuk sisanya, flexbox/grid.
display: flow-root adalah clearfix modern satu baris; lupakan hack ::after kecuali mendukung browser purba.
Saat membaca kode lama berbasis float, cari pola .clearfix atau clear: both untuk memahami struktur kolomnya sebelum me-refactor ke flexbox.

Rangkuman

Float = teks mengelilingi gambar. Waspadai induk kolaps, atasi dengan display: flow-root. Untuk layout kolom, lupakan float dan pakai flexbox/grid.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Rasakan Kolapsnya

Di playground:

Hapus display: flow-root dari .wadah, amati border induk kolaps (hanya setinggi padding). Kembalikan lagi.
Ganti clearfix modern itu dengan clearfix klasik (::after + clear: both). Pastikan hasilnya sama.
Di komentar, tulis satu kalimat: kapan float masih pantas dipakai tahun ini?

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Halo CSS</h1>
<p>Edit styles.css dan lihat hasilnya.</p>
</body>
</html>

Open Sandbox