PENGERTIAN
SleepingCodings - Float berfungsi sebagai pengaturan tata letak sebuah elemen secara horizontal. Nah, disini terdapat 4 value yang bisa di gunakan untuk property float yaitu, left, right, inherit dan none. Salah satu contoh penggunaan float yang paling sering di temukan ialah gambar postingan yang samping dari gambar postingan tersebut terdapat text.
1. float: left;
=>Digunakan untuk menentukan bahwa sebuah elemen harus mengapung (float) disebelah kiri dari posisi containing block (elemen blok yang menampungnya).
2. float right;
=>Digunakan untuk menentukan bahwa sebuah elemen harus mengapung (float) disebelah kanan dari posisi containing block (elemen blok yang menampungnya).
3. float inherit;
=>Value dari property float, mengikuti induk element sebelumnya.
4. float none;
=>Digunakan untuk menentukan bahwa sebuah elemen tidak boleh mengapung (float).
PENGGUNAAN FLOAT DENGAN GAMBAR DI SISI KIRI, TEXT SISI KANAN
index.html
<!DOCTYPE html>
<html>
<head>
<title>Sleeping-Codings</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Tutorial Penggunaan Float dengan menggunakan CSS</h1>
<div class="bungkus">
<img class="gambar" src="a.jpg" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
style.css
h1 {
text-align: center;
}
.gambar {
width: 300px;
float: left;
margin-right: 10px;
}
Jika di jalankan di Web Browser :
 |
| Gambar 1.1 Float CSS Sleeping-Codings |
Nah, jika temen" lihat kok bisa sih text nya bisa di samping gambar, karena tadi Author memberi "float:left" pada element gambar sehingga gambar menuju ke pojok kiri dan text akan mengikuti arah gambar tersebut.
KESIMPULAN
Nah, jadi gampangkan penggunaan Float di sini, kita hanya perlu menentukan untuk apa float tersebut di pakai, maka temen" akan secara otomatis mengetahui kegunaannya masing".
Semoga Bermanfaat ~
Wassalamu'alaikum Wr. Wb
No comments:
Post a Comment