Float adalah salah satu konsep penting dalam CSS. Tanpa pemahaman akan prinsip ini, halaman web tidak dapat dibuat berbasis CSS. Secara sederhana, float dapat diterjemahkan sebagai mengambang, yang pada akhirnya berarti bahwa suatu elemen akan disusun di sebelah kiri atau kanan elemen lain. (Secara normal, elemen tersebut akan berada di bawah elemen lain).
<p><img src="bild.jpg" /> Pada kumpulan ini terdapat 12 bentuk sendiri yang dapat Anda gunakan dalam selebaran, latar belakang, dll. Bentuk-bentuk ini terdiri dari 18, 21 dan 24 strip serta lebar sinar yang berbeda. Preset ini menjadi dasar yang baik untuk efek yang indah dalam tata letak dan gambar Anda.</p>
Di sini sebuah contoh akan menjelaskan aspek ini.
Saat dilihat, gambar berada dalam aliran teks.
Sekarang, mari kita bahas properti float.
img { float: left;}
Sekali lagi, lihat hasilnya.
Di sini, gambar difloatkan. Oleh karena itu, teks mengalir di sekeliling gambar tersebut.
Properti float dapat diberikan nilai left dan right untuk membuat elemen tersebut "mengambang" ke kiri (float: left) atau kanan (float: right). Anda juga bisa mencoba memberikan float: right pada gambar.
Dalam kasus ini, terjadi tiga hal:
• Grafik diambil dari aliran normal.
• Grafik berpindah ke atas di dalam elemen p.
• Grafik ditampilkan sesuai sejauh mungkin ke kanan.
Setelah melihat hasil sampai saat ini, terlihat bahwa tampilannya belum cukup rapi. Memang, jarak antara gambar dan teks yang mengelilinginya belum ditentukan. Sesuaikan sintaksnya seperti berikut:
img {
float: left;
margin-right: 20px;
}
Garis kanan gambar ditentukan sebesar 20 piksel. Ini menghasilkan tampilan sebagai berikut:
Coba eksperimen dengan jarak tepi di sini.
Mengakhiri Float
Kembali ke contoh gambar. Saya akan memperluas sintaks dengan menambahkan satu paragraf teks tambahan.
<p><img src="bild.jpg" />Pada kumpulan ini terdapat 12 bentuk sendiri yang dapat Anda gunakan dalam selebaran, latar belakang, dll. Bentuk-bentuk ini terdiri dari 18, 21 dan 24 strip serta lebar sinar yang berbeda. Preset ini menjadi dasar yang baik untuk efek yang indah dalam tata letak dan gambar Anda.</p><p>Pada kumpulan ini terdapat 12 bentuk sendiri yang dapat Anda gunakan dalam selebaran, latar belakang, dll. Bentuk-bentuk ini terdiri dari 18, 21 dan 24 strip serta lebar sinar yang berbeda. Preset ini menjadi dasar yang baik untuk efek yang indah dalam tata letak dan gambar Anda.</p>
Hasilnya seperti berikut:
Sekarang bukan hanya paragraf pertama yang mengelilingi grafik. Hal yang sama berlaku juga untuk paragraf teks kedua. Hal ini terjadi karena grafik melampaui batas paragraf pertama ke bawah. Agar pemahaman lebih baik, coba berikan latar belakang berwarna pada paragraf di mana grafik berada.
Saat melihat hasilnya, terlihat bahwa grafik memang melewati paragraf ke bawah. Tentu saja, hal ini tidak selalu diinginkan. Pada titik inilah properti clear menjadi penting. Properti ini dapat mengakhiri float. clear memaksa elemen berikutnya untuk mulai di bawah elemen yang difloatkan, bukan di sampingnya. Properti clear memiliki nilai sebagai berikut:
• left – mengakhiri float: left
• right – mengakhiri float: right
• both – mengakhiri baik float: right maupun float: left
Pada contoh berikut, saya memberikan paragraf kedua nilai clear: left untuk mengakhiri float.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
img {
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<p style="background-color:#CCFF66;"><img src="bild.jpg" />Pada kumpulan ini terdapat 12 bentuk sendiri yang dapat Anda gunakan dalam selebaran, latar belakang, dll. Bentuk-bentuk ini terdiri dari 18, 21 dan 24 strip serta lebar sinar yang berbeda. Preset ini menjadi dasar yang baik untuk efek yang indah dalam tata letak dan gambar Anda.</p>
<p style="clear:left;">Pada kumpulan ini terdapat 12 bentuk sendiri yang dapat Anda gunakan dalam selebaran, latar belakang, dll. Bentuk-bentuk ini terdiri dari 18, 21 dan 24 strip serta lebar sinar yang berbeda. Preset ini menjadi dasar yang baik untuk efek yang indah dalam tata letak dan gambar Anda.</p>
</body>
</html>
Dengan sintaks yang ditunjukkan, paragraf kedua sekarang benar-benar ditampilkan di bawah gambar.
Dalam kebanyakan kasus, sebenarnya Anda dapat menggantikan clear: left atau clear: right dengan clear: both. Oleh karena itu, disarankan untuk hanya membuat kelas yang sesuai di stylesheet Anda, yang kemudian dapat Anda panggil jika diperlukan.
.clearing {
clear: both;
}
Anda dapat menggunakan kelas ini setiap kali float dari suatu elemen harus dihentikan.
<p class="clearing">Inhalte ...</p>
Untuk Apa Menggunakan Float
Tentu saja, float tidak hanya diperlukan untuk aliran teks terkait dengan gambar. Faktanya, ini adalah konsep dasar dari halaman web berbasis CSS. Karena berkat float, layout dengan beberapa kolom dapat diimplementasikan dengan mudah. Lihatlah contoh berikut:
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
#navi {
float:left;
width:12em;
background-color:#99FFFF;
}
#inhalt {
margin-left: 14em;
background-color: #FF3333;
}
</style>
</head>
<body>
<div id="navi">
<ul>
<li>Startseite</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</div>
<div id="inhalt">
Ini adalah konten dari situs web.
</div>
</body>
</html>Di sini, layout dua kolom dibangun. Hal istimewa: Kolom berdiri berdampingan.
Dan inilah yang dicapai dengan konsep Floating. Informasi lengkap mengenai cara membangun situs web berdasarkan float akan dijelaskan lebih lanjut dalam seri ini.
