CSS Float dan Clear

by

Selain properti position di css, ada properti lain untuk mengatur layout yaitu float.

Float adalah properti css untuk mengatur bagaimana elemen html itu “melayang” atau ditempatkan.

Saya agak sulit mengartikannya dalam bahasa indonesia. hehehe

Daftar Isi
  1. Value Float
  2. Value Clear

float biasanya digunakan untuk mengatur elemen html di dalam konten. Berbeda dengan position yang lebih general dan bisa tidak saling terkait dengan elemen lain, kalau float setiap perubahannya bisa berimbas pada posisi elemen lainnya.

Value Float

Ada empat value dalam float, yaitu:

  • left posisinya di sebelah kiri
  • right posisinya di sebelah kanan
  • none tidak ada posisi pasti (default dari sananya)
  • inherit mengikuti element induknya

Yang biasa dipakai adalah left dan right. Biar tidak bingung, saya kasih contoh sebelum dan sesudah saya beri float.

Sebelum float:

<style type="text/css">
	#box{
		width: 100%;
		height: 75px;
		border: 1px solid black;
		background: #E8F3ED;
	}
	.box_kiri{
		width: 40%;
		height: 100%;
		border: 1px solid black;
		background: #A0CFB5;
		margin: 10px;
	}
	.box_kanan{
		width: 40%;
		height: 100%;
		border: 1px solid black;
		background: #51B67F;
		margin: 10px;
	}
</style>
<div style="height: 80px">
<div id="box">
	<div class="box_kiri">konten kiri</div>
	<div class="box_kanan">konten kanan</div>
</div>
</div>

Hasilnya adalah:

konten kiri
konten kanan

Kita beri float untuk .box_kiri dan .box_kanan, kode css menjadi:

.box_kiri{
	width: 40%;
	height: 100%;
	border: 1px solid black;
	background: #A0CFB5;
	margin: 10px;
	float: left
}
.box_kanan{
	width: 40%;
	height: 100%;
	border: 1px solid black;
	background: #51B67F;
	margin: 10px;
	float: right;
}

Hasilnya:

konten kiri
konten kanan

Value Clear

clear digunakan untuk membersihkan atau menetralkan atau menghapus property float yang ada di elemen lain. Supaya tidak ngefek ke elemen yang sedang digunakan.

Valuenya:

  • left menghapus float dengan value left
  • rightmenghapus float dengan value right
  • none tidak menghapus apa-apa
  • inherit mengikuti element induknya
  • both menghapus float dengan value left dan right

Biar tidak bingung lihat contoh berikut:

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Link HTML CSS</title>
	
<style type="text/css">
.div1 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
  padding:5px;
}

.div2 {
  border: 1px solid red;
  padding:5px;
}

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

.div4 {
  border: 1px solid red;
  clear: left;
  padding:5px;
}

.div5 {
  float: right;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
  padding:5px;
}

.div6 {
  border: 1px solid red;
  clear: right;
  padding:5px;
}

.div7 {
  border: 1px solid red;
  clear: both;
  padding:5px;
}
</style>
</head>
<body>

<p>Tanpa clear</p>
<div class="div1">div1 float left</div>
<div class="div2">div2 - posisinya ada di setelah div1 yang memiliki float <code>left</code>. Karena tidak diberi clear, makannya div2 masih kena efeknya dari div1</div>
<br><br>

<p>Ditambah clear left</p>
<div class="div3">div3 float left</div>
<div class="div4">div4 diberi clear left. Makannya div 4 akan otomatis turun untuk "menetralkan" float dari div 3</div>

<p>Ditambah clear right</p>
<div class="div5">div5 float right</div>
<div class="div6">div6 diberi clear right. Makannya div 6 akan otomatis turun untuk "menetralkan" float dari div 5</div>

<p>Ditambah clear both</p>
<div class="div5">div5 float right</div>
<div class="div7">div7 diberi clear both. Jadi semua efek float akan dihapus</div>
</body>
</html>

Efeknya adalah:

Tanpa clear

div1 float left
div2 – posisinya ada di setelah div1 yang memiliki float left. Karena tidak diberi clear, makannya div2 masih kena efeknya dari div1


Ditambah clear left

div3 float left
div4 diberi clear left. Makannya div 4 akan otomatis turun untuk “menetralkan” float dari div 3

Ditambah clear right

div5 float right
div6 diberi clear right. Makannya div 6 akan otomatis turun untuk “menetralkan” float dari div 5

Ditambah clear both

div5 float right
div7 diberi clear both. Jadi semua efek float akan dihapus

Sekian tutorial cara mengatur float dan clear css. Kalau masih bingung, coba terus saja, ganti valuenya supaya tahu efeknya gimana.

Leave a Comment