CSS Float
Apa itu float di dalam CSS? float secara etimologi berarti "mengapung". Property float digunakan untuk menentukan apakah sebuah elemen box harus mengapung (float) atau tidak. Sebuah elemen bisa diposisikan seakan-akan berada mengapung diantara elemen setelahnya. Mengapung disini, berarti elemen yang mengalami float tersebut akan dipindahkan ke tepi paling kiri (float:left) atau tepi paling kanan (float:right) dari element induknya.
Tujuan utama float adalah untuk mengatur text agar melipat di sekitar elemen image (gambar). Akan tetapi, float juga bisa digunakan untuk layout dan style lainnya.
Elemen yang tidak mengalami float berada pada posisi normal, yaitu berada pada arah berlawanan dengan elemen yang mengelilinginya (bertumpuk dari atas kebawah atau dari kiri ke kanan). Sedangkan, Elemen yang mengalami float tidak mengikuti kaidah sebagaimana semestinya. Property float tidak bisa digunakan untuk elemen-elemen yang memiliki posisi absolute (position: absolute;)
Syntax
Penggunaan Sintaksis CSS float
float: left | right | none | inherit
Values
Nilai CSS float
CSS property float memiliki value: left, right, none dan inherit. Secara default float memiliki nilai none
Digunakan untuk menentukan bahwa sebuah elemen harus mengapung (float) disebelah kiri dari posisi containing block (elemen blok yang menampungnya).
Digunakan untuk menentukan bahwa sebuah elemen harus mengapung (float) disebelah kanan dari posisi containing block (elemen blok yang menampungnya).
Digunakan untuk menentukan bahwa sebuah elemen tidak boleh mengapung (float).
value dari property float, mengikuti induk element sebelumnya.
Example
Contoh CSS float
<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS Float</title>
</head>
<body>
<header>
<h3>My Blog</h3>
</header>
<article>
<h1>Belajar CSS Float </h1>
<p>Bagaimana menggunakan CSS Float?. Pelajari disini.</p>
<p>Baca Selengkapnya...</p>
</article>
<aside>
<h3>Populer</h3>
<ul>
<li><a href="#">Belajar CSS Dasar</a></li>
</ul>
</aside>
<footer>
<small>Copyright© 2015.</small>
</footer>
</body>
</html>
article {
float:left
}
aside {
float:right
}
footer {
clear: both;
text-align: center
}
float apabila digunakan untuk design layout, selalu beriringan dengan css property clear. Silahkan pelajari pembahasan mengenai Belajar CSS Property Clear
Di bawah ini adalah contoh lain dari float yang sering digunakan pada sebuah image (gambar):
Contoh Lengkap
Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo CSS Float - apacara.com</title>
<style>
.float-left img {
float: left ;
margin-right: 20px;
}
.float-right img {
float: right ;
margin-left: 20px;
}
/* clear */
.clear-left:after {
content: " ";
display:table;
clear:left;
}
</style>
</head>
<body>
<h2>Mengenal CSS float</h2>
<p> Berikut contoh penggunaan css float pada gambar.</p>
<h3>Sebelumnya, <em>normal flow</em></h3>
<div>
<img src="/media/images/content/muslimah-cantik.jpg" width="150px" height="154">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<hr />
<h3>Sesudahnya, dengan <em>float:left</em></h3>
<div class="float-left">
<img src="/media/images/content/muslimah-cantik.jpg" width="150px" height="154">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="clear-left"></div>
<hr />
<h3>Sesudahnya, dengan <em>float:right</em></h3>
<div class="float-right">
<img src="/media/images/content/muslimah-cantik.jpg" width="150px" height="154">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
SHARE