Fungsi Property Float pada CSS

Fungsi Property Float pada CSS

153

Pada tutorial kali ini kita akan membahas tentang fungsi property float pada CSS. Maksud dari fungsi ini adalah untuk menempatkan elemen pada bilah sisi halaman website, yakni sisi kanan atau sisi kiri dari halaman website tersebut. Property yang digunakan untuk mengatur bilah sisi ini adalah property float itu sendiri, dan nilai propertynya adalah right atau left.

Sekarang silahkan tulis kode di bawah ini :

XHTML

<!DOCTYPE HTML>

<html>

<head>

<style>

  div{float: left;}

  .box1{

   width: 100px;

   height: 100px;

   text-align: center;

   color: white;

   background-color: dodgerblue;

  }

  .box2{

   width: 100px;

   height: 100px;

   text-align: center;

   color: white;

   background-color: fuchsia;

  }

  .box3{

   width: 100px;

   height: 100px;

   text-align: center;

   color: white;

   background-color: #0F9;

  }

</style>

</head>

<body>

<div class="box1">Box 1</div>

<div class="box2">Box 2</div>

<div class="box3">Box 3</div>

</body>

</html>

Maka output dari kode sumber di atas akan membuat elemen sebaris dari kiri ke kanan.

Fungsi Property Float pada CSS

Apabila saya tidak menempatkan script :

div{float: left;}

maka elemen akan berbaris secara vertical karena bilah sisinya tidak di atur.

float pada css

Terkadang ada masalah dimana terjadi penumpukan elemen saat menggunakan konsep floating elemen. Silahkan salin lebih dulu kode sumber di bawah untuk melihat hasilnya :

XHTML

<!DOCTYPE HTML>

<html>

<head>

<style>

  .box1{

    width: 100px;

    height: 100px;

    text-align: center;

    color: white;

    background-color: dodgerblue;

    margin: 10px;

    float: right;

  }

</style>

</head>

<body>

<div class="box1">Box 1</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus iaculis massa vitae volutpat. Donec auctor consectetur nisl non ultrices. Quisque velit diam, ultrices sed ex ac, venenatis ultrices odio. Nulla vulputate lobortis nisl, vel vulputate lacus volutpat eu. Nam in elit mi. Proin et pharetra urna. Donec quis tristique nisl. Sed ultrices euismod augue, quis iaculis leo elementum vitae. Sed vehicula eros id blandit molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse potenti. Morbi accumsan, erat et vehicula commodo, est mauris tincidunt odio, quis dignissim erat odio a erat.</p>  

</body>

</html>

Dan di bawah ini adalah hasil dari kode sumber di atas :

floating pada css

Dari kode sumber di atas kita ingin agar box berada di atas paragraph, namun tetap di bilah sisi kiri. Seperti gambar di bawah ini :

cara float elemen pada css

CSS menyediakan property untuk membersihkan efek dari bilah sisi ini dengan menggunakan property clear: both. Dengan begitu efek dari bilah sisi ini akan hilang. Namun anda harus meletakkan property clear: both setelah elemen yang memiliki aturan bilah sisi tersebut. Berikut kode sumbernya.

XHTML

<!DOCTYPE HTML>

<html>

<head>

<style>

  .box1{

   width: 100px;

   height: 100px;

   text-align: center;

   color: white;

   background-color: dodgerblue;

   margin: 10px;

   float: right;

  }

</style>

</head>

<body>

<div class="box1">Box 1</div>

<div style="clear: both"></div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus iaculis massa vitae volutpat. Donec auctor consectetur nisl non ultrices. Quisque velit diam, ultrices sed ex ac, venenatis ultrices odio. Nulla vulputate lobortis nisl, vel vulputate lacus volutpat eu. Nam in elit mi. Proin et pharetra urna. Donec quis tristique nisl. Sed ultrices euismod augue, quis iaculis leo elementum vitae. Sed vehicula eros id blandit molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse potenti. Morbi accumsan, erat et vehicula commodo, est mauris tincidunt odio, quis dignissim erat odio a erat.</p>

</body>

</html>

Di atas saya tambahkan script

CSS

<div style="clear: both"></div>

Setelah.

CSS

<div class="box1">Box 1</div>

Dan hasilnya akan sesuai dengan gambar terakhir. Semoga bermanfaat.


Demikian tutorial dari fungsi property float pada CSS.

Keyword: fungsi properti float css, cara float css

Share:



Postingan Sebelumnya:


Postingan Selanjutnya: