Sekarang, kita akan mempelajari penggunaan properti float dan clear. Float digunakan untuk menempelkan elemen HTML ke sisi kanan atau kiri halaman. Kalian bisa menggunakannya seperti fitur wrap di software word processor jika kalian memberikan nilai left atau right pada properti float. Properti float pada elemen pasangannya bisa kalian beri nilai "none".
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
.teks{
float:none;
}
.tempel_kiri{
float:left;
}
.tempel_kanan{
float:right;
}
.kontainer{
background : yellow;
color : red;
border : double 4px orange;
float : none;
}
.gambar{
width:64px;
height:auto;
}
</style>
</HEAD>
<BODY>
<div class="kontainer">
<div class="tempel_kiri">
<img src="gambarku.jpeg" class="gambar">
</div>
<div class="teks">
<p>Ini adalah paragraf. Paragraf berisi beberapa kalimat yang diakhiri dengan titik. Paragraf terbagi jadi beberapa jenis. Ada paragraf induktif, deduktif, campuran, dan ineratif. Berdasarkan isinya; ada paragraf narasi, deskripsi, argumentasi, persuasi, dan eksposisi. Selain itu paragraf juga bisa dibagi berdasarkan fungsi dan tujuannya.
</div>
</div>
<div class="kontainer">
<div class="tempel_kanan">
<img src="gambarku.jpeg" class="gambar">
</div>
<div class="teks">
<p>Ini adalah paragraf. Paragraf berisi beberapa kalimat yang diakhiri dengan titik. Paragraf terbagi jadi beberapa jenis. Ada paragraf induktif, deduktif, campuran, dan ineratif. Berdasarkan isinya; ada paragraf narasi, deskripsi, argumentasi, persuasi, dan eksposisi. Selain itu paragraf juga bisa dibagi berdasarkan fungsi dan tujuannya.
</div>
</div>
</BODY>
</HTML>
Properti float juga bisa kalian gunakan untuk mengatur tata letak halaman. Tapi, sebaiknya kalian gunakan properti seperti grid & flex untuk mengatur tata letak halaman jika masih memungkinkan.
Properti Clear
Clear digunakan bersamaan dengan properti float untuk mengosongkan salah satu atau kedua sisi di sebelah elemen HTML yang kita beri properti float. Properti clear bisa diberikan pada selector yang memiliki properti float. Properti clear akan mengosongkan sisi kiri atau kanan dari elemen HTML. Sama seperti float, properti clear bisa diberi nilai none, left, right, dan both; tergantung sisi mana yang ingin dikosongkan.<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
.teks{
float:none;
}
.tempel_kiri{
float:left;
}
.tempel_kanan{
float:right;
}
.kontainer{
background : yellow;
color : red;
border : double 4px orange;
float : none;
clear : both;
}
.gambar{
width:64px;
height:auto;
}
.menu{
float : none;
clear : right;;
}
.menu span{
float : right;
background : #778866;
border-left : solid #99AABB 1px;
border-right : solid #99AABB 1px;
margin:1px;
}
</style>
</HEAD>
<BODY>
<div class="menu">
<span>menu 1</span>
<span>menu 2</span>
<span>menu 3</span>
</div>
<div class="kontainer">
<div class="tempel_kiri">
<img src="gambarku.jpeg" class="gambar">
</div>
<div class="teks">
<p>Ini adalah paragraf. Paragraf berisi beberapa kalimat yang diakhiri dengan titik. Paragraf terbagi jadi beberapa jenis. Ada paragraf induktif, deduktif, campuran, dan ineratif. Berdasarkan isinya; ada paragraf narasi, deskripsi, argumentasi, persuasi, dan eksposisi. Selain itu paragraf juga bisa dibagi berdasarkan fungsi dan tujuannya.
</div>
</div>
<div class="kontainer">
<div class="tempel_kanan">
<img src="gambarku.jpeg" class="gambar">
</div>
<div class="teks">
<p>Ini adalah paragraf. Paragraf berisi beberapa kalimat yang diakhiri dengan titik. Paragraf terbagi jadi beberapa jenis. Ada paragraf induktif, deduktif, campuran, dan ineratif. Berdasarkan isinya; ada paragraf narasi, deskripsi, argumentasi, persuasi, dan eksposisi. Selain itu paragraf juga bisa dibagi berdasarkan fungsi dan tujuannya.
</div>
</div>
</BODY>
</HTML>
Menu pada contoh di atas menggunakan properti float dengan nilai right untuk menumpuk isinya di sisi kanan. Selain itu, properti clear juga diberi nilai right agar sisi kiri dari menu kosong.
Kalian bisa mencoba untuk menghilangkan properti none. Kemudian lihat hasilnya.