Belajar CSS (16. Float and Clear)

Belajar CSS (16. Float and Clear)

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

Leave a Reply

Your email address will not be published.Required fields are marked *