Float CSS


Properti float CSS menentukan bagaimana suatu elemen harus mengapung.

Properti clear CSS menentukan elemen apa yang bisa mengapung di samping elemen yang dibersihkan dan di sisi mana.


Properti float

Properti float digunakan untuk menentukan posisi dan format konten, misalnya membuat gambar mengapung kekiri teks dalam sebuah container.

Properti float dapat memiliki salah satu dari nilai berikut:

  • left - Elemen mengapung di sebelah kiri containernya
  • right - Elemen mengapung di sebelah kanan containernya
  • none - Elemen tidak mengapung (akan ditampilkan tepat di tempat kemunculannya dalam teks). Ini adalah default
  • inherit - Elemen mewarisi nilai float dari induknya

Dalam penggunaannya yang paling sederhana, properti float dapat digunakan untuk membungkus teks di sekitar gambar.


float: right

Contoh berikut melihatkan bahwa gambar mengapung ke kanan dalam teks:

Smartphone Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis.

Contoh

img {
  float: right;
}


float: left

Contoh berikut melihatkan bahwa gambar mengapung ke kiri dalam teks:

Smartphone Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis.

Contoh

img {
  float: left;
}


float: none

Dalam contoh berikut, gambar akan ditampilkan tepat di tempat kemunculannya dalam teks:

Smartphone Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis.

Contoh

img {
  float: none;
}


Mengapung Di Sebelah Satu Sama Lain

Biasanya elemen div akan ditampilkan di atas satu sama lain. Namun, jika kita menggunakan float: left; kita dapat membiarkan elemen mengapung di samping satu sama lain:

Div 1
Div 2
Div 3



Contoh

div {
  float: left;
  padding: 15px;
}

.div1 {
  background: red;
}

.div2 {
  background: yellow;
}

.div3 {
  background: green;
}


Sumber referensi: w3schools

Komentar

Posting Komentar