Properti Float CSS

View Categories

Properti Float CSS

Properti float pada CSS dapat menentukan bagaimana sebuah elemen harus mengisi otomatis ruang di sekitar elemen tersebut, floating dapat diterjemahkan sebagai mengapung. Suatu elemen dapat mengapung ke kiri dan mengisi bagian kiri dari elemen penampung. Suatu elemen dapat mengapung ke kanan dan mengisi bagian kanan dari elemen penampung.

Properti float

Properti float dapat digunakan untuk memposisikan suatu elemen dan konten, misalnya membiarkan gambar mengapung ke kiri ke dalam tulisan di dalam wadah.

Properti float dapat memiliki salah satu dari nilai berikut:

  • left – Elemen mengapung di sebelah kiri wadahnya.
  • right – Elemen mengapung di sebelah kanan wadahnya.
  • none – Elemen tidak mengapung (tetapi akan ditampilkan tepat di tempat kemunculannya di dalam tulisan). Ini nilai default.
  • inherit – Elemen mewarisi nilai float dari induknya.

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

Properti float: right

Contoh berikut menentukan bahwa gambar harus mengapung ke kanan di dalam tulisan:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: right;
}
</style>
</head>
<body>

<h2>float: right</h2>

<p>Dalam contoh ini, gambar akan mengapung ke kanan dalam paragraf dan teks dalam paragraf akan membungkus gambar.</p>

<p><img src="pineapple.jpeg" alt="Nanas" style="width:170px;height:170px;margin-left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elite. 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. Di at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Bilangan bulat fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

</body></html>

Jalankan Contoh

Properti float: left

Contoh berikut menentukan bahwa gambar harus mengapung ke kiri di dalam tulisan:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: left;
}
</style>
</head>
<body>

<h2>float: left</h2>

<p>Dalam contoh ini, gambar akan mengapung ke kiri dalam paragraf dan teks dalam paragraf akan membungkus gambar.</p>

<p><img src="pineapple.jpeg" alt="Nanas" style="width:170px;height:170px;margin-right:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elite. 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. Di at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Bilangan bulat fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

</body></html>

Jalankan Contoh

Properti float: none

Dalam contoh berikut, gambar akan ditampilkan tepat di tempatnya di dalam tulisan (float: none;):

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: none;
}
</style>
</head>
<body>

<h2>float: none</h2>

<p>Dalam contoh ini, gambar akan ditampilkan tepat di tempatnya muncul di teks (float: none;).</p>

<p><img src="pineapple.jpeg" alt="Nanas" style="width:170px;height:170px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elite. 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. Di at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Bilangan bulat fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

</body></html>

Jalankan Contoh

Properti Float Elemen Bersebelahan

Biasanya elemen div akan ditampilkan di atas elemen lainnya. Namun, jika menggunakan float: left maka dapat membuat elemen mengapung bersebelahan:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
div {
  float: left;
  padding: 15px; 
}

.div1 {
  background: red;
}

.div2 {
  background: yellow;
}

.div3 {
  background: green;
}
</style>
</head>
<body>

<h2>Element Mengapung Berdampingan</h2>

<p>Dalam contoh ini, tiga div akan mengapung bersebelahan.</p>

<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<div class="div3">Div 3</div>

</body></html>

Jalankan Contoh

Tutorial sebelumnya : Properti Overflow CSS
Tutorial setelahnya : Properti Clear dan Clearfix CSS
Semua Tutorial CSS : Tutorial CSS 

Tinggalkan Balasan