Pelajari cara menggunakan properti `float` untuk mengatur elemen agar mengalir di sisi kiri atau kanan elemen lainnya.

CSS Float

Properti float digunakan untuk memindahkan elemen ke kiri atau kanan, memungkinkan elemen lainnya mengalir di sekitarnya. Properti ini sering digunakan untuk membuat layout kolom dan gambar.

Nilai dari `float`

left: Elemen mengapung ke kiri.
right: Elemen mengapung ke kanan.
none (default): Elemen tidak mengapung dan berada di aliran dokumen normal.

Contoh: float: left

<style>
  .float-left {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    float: left;
    margin-right: 20px;
  }
</style>
 
<div class="float-left">
  Ini adalah elemen yang mengapung ke kiri.
</div>
<div>
  Elemen lain akan mengalir di sekitar elemen yang mengapung ke kiri.
</div>

Contoh: float: right

<style>
  .float-right {
    width: 200px;
    height: 100px;
    background-color: lightgreen;
    float: right;
    margin-left: 20px;
  }
</style>
 
<div class="float-right">
  Ini adalah elemen yang mengapung ke kanan.
</div>
<div>
  Elemen lain akan mengalir di sekitar elemen yang mengapung ke kanan.
</div>

Contoh: float: none

<style>
  .float-none {
    width: 200px;
    height: 100px;
    background-color: lightcoral;
    float: none;
  }
</style>
 
<div class="float-none">
  Ini adalah elemen dengan float: none, yang berada di aliran normal.
</div>
<div>
  Elemen ini berada di bawah elemen pertama karena tidak mengapung.
</div>

Dengan menggunakan float, kamu bisa memanipulasi layout halaman agar lebih fleksibel. Namun, seringkali kita menggunakan teknik lain, seperti Flexbox atau Grid, untuk mencapai layout yang lebih kompleks dan responsif.

CSS Float

CSS Float

Nilai dari float

Contoh: float: left

Contoh: float: right

Contoh: float: none

On this page

Nilai dari `float`