Yup, kali ini saya akan mencoba membahas tentang teknik float di css. Artikel ini merupakan artikel berseri yang gak tau kapan selesainya . Pokoknya saya akan coba bahas segala yang saya tau tentang float. Kalau ada yang mau mengoreksi silahkan . Langsung aja ya…

Apa itu float?

Float itu bahasa inggris, klo di indonesia-in tuh artinya mengambang atau melayang. contohnya aja klo di restoran mesen minuman avocado float, nah di minumannya khan selain ada alpukatnya ada juga yang mengambang-ngambang di atasnya .

Di css ada properti yang namanya float. Valuenya itu ada right, left dan none. Lah, trus kalau kita pake properti ini apa yang mengambang?? yang mengambang itu adalah selektor (bisa tag, id atau class) yang dikasih properti float di css. Mengambangnya bisa ke kiri atau ke kanan tergantung dari valuenya.

Contohnya aja pas membuat layout tanpa tabel, di situ khan seharusnya posisi sidebarnya berada di atas posting. Karena di css-nya sidebar di kasih properti float yang valuenya left, trus yang posting juga dikasih float tapi valuenya right, makanya sidebarnya melayang/mengambang ke sebelah kirinya posting, begitu juga yang posting mengambang ke kanannya sidebar.

Float ini gak cuman bisa di kasih di tag div seperti yang dicontohkan di atas, tapi juga bisa dikasih ke tag-tag html yang lain, baik yang inline tag atau block tag. Dan juga, penggunaan float ini biasanya berhubungan dengan pembuatan layout dari suatu website.

Contoh penggunaan float yang lain nih, hmm… misal pengen buat kyk gini, pictnya :

Pertama-tama, kita buat dulu paragraf yg isinya kata-kata gak jelas di atas . Kira-kira gini :

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, arcu id suscipit faucibus, sem felis pharetra ante, at porttitor ligula eros et ante. Phasellus vestibulum, nunc eget malesuada vehicula, odio augue pharetra dui, eu pretium orci turpis at urna. Vivamus est enim, malesuada sit amet euismod vel, tincidunt sit amet nulla. Nullam orci magna, elementum sit amet malesuada eu, consectetur vel augue. Proin ut dui eu nibh dapibus porta. Nunc vel urna tellus, vitae consectetur turpis. Quisque dictum sodales gravida. Ut congue gravida mauris at gravida. Donec lacinia lacus a mi tempus cursus. Donec auctor tortor ac orci consectetur adipiscing. Integer at justo tellus.
</p>

trus biar agak rapih dikit paragrafnya kita kasih css dikit :

 p {
      width: 300px;
      padding: 5px;
      border: 1px solid #ccc;
    }

tampilannya jadi gini :

Lalu, kita susupi awal paragraf tadi dengan gambar yang telah disediakan sebelumnya. HTMLnya jadi gini:

<p><img src="images/me.gif" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, arcu id suscipit faucibus, sem felis pharetra ante, at porttitor ligula eros et ante. Phasellus vestibulum, nunc eget malesuada vehicula, odio augue pharetra dui, eu pretium orci turpis at urna. Vivamus est enim, malesuada sit amet euismod vel, tincidunt sit amet nulla. Nullam orci magna, elementum sit amet malesuada eu, consectetur vel augue. Proin ut dui eu nibh dapibus porta. Nunc vel urna tellus, vitae consectetur turpis. Quisque dictum sodales gravida. Ut congue gravida mauris at gravida. Donec lacinia lacus a mi tempus cursus. Donec auctor tortor ac orci consectetur adipiscing. Integer at justo tellus.
</p>

Nah, setelah dikasih gambar jadinya gini klo diliat di browser :

Posisi gambarnya jadi aneh ya. Biar agak bagus, kita akalin gambarnya pake float. Di css ditambahkan :

img{
  float: left;
}

Jadi, gambarnya itu akan mengambang ke kiri (karena value floatnya left), dan tulisan di sekitarnya akan ikut menyesuaikan (terpengaruh). Gini kira2 :

Abis itu, gambarnya dikasih border sama margin biar lebih sip lagi,

img{
 float: left;
 border: 1px solid #ccc;
 margin: 2px 10px 0px 0px;
}

Jadi deh..

Oke,,segitu dulu ya. Bersambung ke bagian duanya hehe :D

Download Souce Code