Float dan Clear CSS: Teks Mengelilingi Gambar

Fungsi float

float mendorong elemen ke satu sisi wadahnya dan membiarkan teks yang mengikutinya mengalir di sekelilingnya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Float</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.5; max-width: 520px; }
    .photo {
      float: left;
      width: 120px; height: 90px;
      margin: 4px 16px 8px 0;
      background: #bfdbfe; border: 2px solid #2563eb;
    }
  </style>
</head>
<body>
  <div class="photo" id="photo"></div>
  <p id="text">The box on the left is floated. This paragraph comes after it in the HTML, and its lines flow around the float instead of starting below it. Once the text passes the bottom of the float, the lines go back to the full width of the container, as you can see at the end of this paragraph when it is long enough to wrap below.</p>
</body>
</html>

Margin pada kotak float menjaga teks agar tidak menempel. Margin adalah cara mengatur celah itu; teksnya sendiri tidak bisa diberi margin ke arah float.

Nilai-nilainya

inline-start dan inline-end mengikuti arah tulisan, jadi tata letak yang dibuat dengannya tercermin dengan benar di halaman yang ditulis dari kanan ke kiri. Elemen yang di-float juga menjadi block: display: inline diubah menjadi block, jadi width dan height berlaku bahkan pada span atau img.

Gambar float di dalam teks

Penggunaan klasiknya: gambar di dalam artikel, dengan teks yang mengalir di sekelilingnya. Float satu gambar ke setiap sisi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Floated images</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.5; max-width: 520px; font-size: 15px; }
    img { width: 110px; height: 80px; }
    .start { float: inline-start; margin-inline-end: 14px; }
    .end { float: inline-end; margin-inline-start: 14px; }
  </style>
</head>
<body>
  <p>
    <img class="start" alt="Blue square" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='80'%3E%3Crect width='110' height='80' fill='%232563eb'/%3E%3C/svg%3E">
    This image floats to the start of the line. The text of the paragraph wraps around it on the other side, and continues under it once the image ends. Floats are still the simplest tool for this magazine style layout.
  </p>
  <p>
    <img class="end" alt="Amber square" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='80'%3E%3Crect width='110' height='80' fill='%23f59e0b'/%3E%3C/svg%3E">
    This one floats to the end of the line instead. Change the direction of the page to right to left and both images switch sides with the text, because the floats use logical values.
  </p>
</body>
</html>

clear: menghentikan teks mengalir

clear berarti "mulai di bawah float sebelumnya di sisi ini". Pakai pada elemen yang tidak boleh berada di samping float, seperti judul bagian berikutnya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Clear</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.5; max-width: 520px; }
    .box { float: left; width: 110px; height: 110px; margin-inline-end: 12px; background: #bbf7d0; border: 2px solid #16a34a; }
    h3 { margin: 8px 0; padding: 4px 8px; background: #e5e7eb; }
    .cleared { clear: both; }
    .demo { display: flow-root; margin-bottom: 20px; } /* keeps the two demos apart */
  </style>
</head>
<body>
  <div class="demo">
    <div class="box" id="box1"></div>
    <p>A short paragraph next to the float.</p>
    <h3 id="h1">This heading is not cleared</h3>
  </div>
  <div class="demo">
    <div class="box" id="box2"></div>
    <p>A short paragraph next to the float.</p>
    <h3 class="cleared" id="h2">This heading has clear: both</h3>
  </div>
</body>
</html>

Judul pertama berdesakan di samping float. Judul kedua dimulai di bawahnya. clear menerima left, right, both, inline-start, inline-end, dan none.

Induk yang mengempis, dan flow-root

Float berada di luar alur normal, jadi wadah yang semua anaknya di-float tidak punya apa-apa di dalam alur dan mengempis menjadi setinggi nol. Background dan border-nya akhirnya hanya berupa garis tipis di atas float:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contain floats</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .parent { border: 3px solid #dc2626; background: #fee2e2; margin-bottom: 110px; }
    .fixed { border-color: #16a34a; background: #dcfce7; margin-bottom: 0; }
    .child { float: left; width: 90px; height: 80px; margin: 6px; background: #fde68a; }
    .fixed { display: flow-root; }
  </style>
</head>
<body>
  <div class="parent" id="broken">
    <div class="child">float</div><div class="child">float</div>
  </div>
  <div class="parent fixed" id="fixed">
    <div class="child">float</div><div class="child">float</div>
  </div>
</body>
</html>

display: flow-root membuat block formatting context baru, yang selalu membungkus float-nya. Kode lama memakai "clearfix" untuk hasil yang sama:

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

overflow: hidden atau auto juga menampung float, dengan efek samping memotong konten; lihat overflow.

Float bukan untuk tata letak

Sebelum ada flexbox dan grid, seluruh tata letak halaman dibangun dari kolom-kolom float, dengan clearfix dan hitungan lebar di mana-mana. Masa itu sudah berlalu: float tidak bisa menengahkan, tidak bisa membuat kolom sama tinggi, dan rusak saat ukuran konten berubah. Pakai display: flex atau display: grid untuk baris dan kolom, dan simpan float untuk membuat teks mengelilingi sesuatu. Untuk menengahkan gambar alih-alih membuat teks mengelilinginya, lihat cara membuat gambar di tengah.

Mengikuti sebuah bentuk

shape-outside membuat teks mengikuti sebuah bentuk, bukan persegi panjang float. Properti ini hanya berfungsi pada elemen yang di-float:

.avatar {
  float: left;
  width: 120px; height: 120px;
  border-radius: 50%;
  shape-outside: circle(50%);
  margin-inline-end: 16px;
}

Kesalahan umum

• Induk dengan tinggi nol. Semua anaknya di-float. Tambahkan display: flow-root.
• Float untuk kolom atau navigasi. Pakai flexbox atau grid.
• Berharap ada float: center. Nilai itu tidak ada. Tengahkan dengan flexbox, grid, atau margin: 0 auto.
• Konten setelah float ikut mengalir padahal seharusnya tidak. Beri clear: both, atau taruh float beserta teksnya di wadah flow-root.
• left dan right fisik di situs multibahasa. Pakai inline-start dan inline-end supaya tata letaknya tercermin di bahasa yang ditulis dari kanan ke kiri.