Belajar CSS (16. Float and Clear)

Akhi Syabab

Float Dan Clear CSS

Diskripsi :
Properti float digunakan untuk membuat suatu elemen atau objek berada di kanan, atau di kiri sesuai kode yang kita tulis dan dapat memberi tempat kosong untuk diisi oleh elemen lain. Sedangkan properti clear digunakan untuk menghilangkan efek float dari element sebelumnya.

perhatikan contoh berikut:

<html>
<head>
	<style>
		body{
		  background-color:yellow;
		}     
		img {
		    float: right;
		}
	 </style>
</head>

<body>
	  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Flag_of_Indonesia.svg/2000px-Flag_of_Indonesia.svg.png" width="150">
	  <p> Ini contoh gambar dengan elemen float yang diberi nilai right atau kanan </p>
</body>
</html>

hasil

dan ini contoh menggunakan clear:

<html>
<head>
  	<style>
		body{
		  background-color:yellow;
		}     
		img {
		    float: right;
		}
		p{
		  clear:right;
		}

  	</style>
</head>

<body>
   <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Flag_of_Indonesia.svg/2000px-Flag_of_Indonesia.svg.png" width="150">
  	<p> Ini contoh gambar dengan elemen float namun diberi nilai clear duntuk menghilangkan efek floatnya </p>
</body>
</html>

hasil

Semoga bermanfaat, sampai jumpa dipostingan selanjutnya.

Written by @akhi_syabab