Penggunaan Properti Float dan Clear dalam CSS

Oleh Unknown

Friday, November 27, 2015

Penggunaan Properti Float dan Clear dalam CSS - Masih terkait dengan pembahasan cara mengatur posisi elemen HTML dengan CSS, sebelumnya ada posisi static, relative, fixed, dan absolute yang sudah dibahas di CSS Position: Cara Mengatur Posisi Elemen HTML. Dan sudah diulas juga tentang beberapa elemen HTML yang posisinya terjadi tumpang tindih dalam pembahasan Mengatasi dan Mengatur Overlapping Element dengan CSS.

Kali ini kita akan mengenal tentang bagaimana mengatur tata letak elemen dengan properti CSS float dan clear. Pasti konco sinahu sering menjumpainya dalam struktur kode template.

1. Float

Float adalah salah satu bagian penting dari cara untuk mengatur posisi elemen HTML dengan CSS. Dengan float, elemen HTML bisa didorong ke kanan ataupun ke kiri. Sedangkan sisa ruangnya akan diisi oleh elemen lain.

Dalam penggunaannya, properti float biasa digunakan untuk mengatur tata letak gambar di sekitar teks.

Di bawah ini adalah contoh sebuah gambar yang tata letaknya diatur dengan float;right (didorong ke sebelah kanan)


<!DOCTYPE html>
<html>
<head>
<style>
img {
    float: right;
    margin: 0 0 10px 10px;
}
</style>
</head>
<body>

<p><img src="link url gambar" alt="sinahu coding" width="130" height="140">
Ini adalah klub favoritku, Arsenal sang meriam London. Bagi fans arsenal London is red, not blue. Artinya bahwa si penguasa London adalah Arsenal, bukan Chelsea. Klub ini dilatih oleh seorang manager berkebangsaan prancis bernama Arsene Wenger, The Professor julukannya.</p>

</body>
</html>

hasilnya :

2. Clear

Properti clear digunakan untuk mengontrol keadaan di sekitar elemen yang diberi efek float. Seperti sudah dijelaskan di atas, elemen setelah elemen yang diberi efek float akan mengisi sisa ruangnya. Untuk menghindari itu, maka menggunakan properti clear. Dengan property clear, kita bisa membersihkan atau menghilangkan efek float dari elemen sebelumnya.

Contoh Tanpa Clear


<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
    float: left;
    width: 100px;
    height: 50px;
    margin: 10px;
    border: 3px solid #73AD21;
}

.div2 {
    border: 1px solid red;
}


.div3 {
    float: left;
    width: 100px;
    height: 50px;
    margin: 10px;
    border: 3px solid #73AD21;
}

.div4 {
    border: 1px solid red;
    clear: left;
}
</style>
</head>
<body>

<h2>Contoh Tanpa clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Perhatikan bahwa elemen div2 dalam kode HTML adalah terletak setelah div1 . Karena div1 sudah float ke kiri, maka teks yang berada di elemen div2 juga menjadi float di sekitar div1. dan div2 melingkupi seluruh area. Seperti inilah jadinya.</div>

</body>
</html>

hasilnya :

Contoh Penggunaan Clear


<!DOCTYPE html>
<html>
<head>
<style>

.div1 {
    float: left;
    width: 100px;
    height: 50px;
    margin: 10px;
    border: 3px solid #73AD21;
}

.div2 {
    border: 1px solid red;
    clear: left;
}
</style>
</head>
<body>

<h2>Menggunakan clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Dengan menggunakan properti clear, elemen div2 menjadi pindah berada di bawah div1. clear: left; membersihkan pengaruh dari float: left; pada div1. Sehingga elemen div2 bersih dari pengaruh float dari elemen div1. Seperti ini jadinya.</div>

</body>
</html>

hasilnya:

Itulah pembahasan tentang properti float dan clear. Semoga ulasan ini bisa dipahami dan menambah wawasan koding konco sinahu semua.