Tips mengatur letak Element blog ( CSS Float,Clear )

Bagaimanakah Cara Mengatur Letak Element div , img , p dan lainnya pada Blog ,, ( CSS FLOAT , CLEAR PROPERTY )

Sebetulnya saya masih perlu belajar banyak mengenai CSS ini , Tpi rasanya sangat pusing Alias mumet dengan RATUSAN bahkan RIBUAN Property dan Value pada css ini .Oke!! Topik kita kali ini yaitu Cara menempatkan / mengatur letak suatu Element div , img , p di blog Anda menggunakan property clear dan float . oy,pada artikel sebelumnya mastony sudah membahas mengenai cara mengatur posisi Element ( CSS POSITION PROPERTY ) Silahkan Baca disini Dan untuk property Value selengkapnya silahkan anda lihat pada tabel di bawah ini :

PROPERTY	VALUE	KETERANGAN
float	left	Element akan menempel ke kiri element induk dan Element lainnya berada disebelah kanannya .
	right	Element akan menempel ke kanan element induk dan Element lainnya berada disebelah kirinya
	none	Element akan tidak menempel ke kiri ataupun ke kanan element akan menempel ke atas element induk element lainnya berada di bawahnya
	inherit	Element akan mengikuti aturan css sebelumnya
clear	left	Element Akan Menempel ke kiri Element induk dan Element lain akan selalu berada dibawahnya
	right	Element Akan Menempel ke kanan Element induk dan Element lain akan selalu berada dibawahnya
	both	Element Akan Menempel ke Atas Element induk dan Element lain akan selalu berada dibawahnya
	inherit	Element akan mengikuti aturan css sebelumnya

klick button dibawah ini untuk melihat letak gambar mengikuti aturan CSS float , beserta kode penulisannya ,,

Source Code

#FloatLeft img{width:60px;height:60px;display:block;margin:5px;float:left;}

---

Float Property

KETERANGAN : code di atas hanya beberapa kode css saja , sedangkan untuk penerapan keseluruhan seperti code dibawah ini:

<style>#FLOAT {margin:5px;padding:0;width:500px;height:400px;border:1px solid black;}
#FLOAT  img{width:60px;height:60px;display:block;margin:5px;float:left;padding:0;}
</style>
<div id="FLOAT">
<img src="https://sites.google.com/site/blognyamastony/iconblog/twitter.png" />
<img src="https://sites.google.com/site/blognyamastony/iconblog/twitter.png" />
<img src="https://sites.google.com/site/blognyamastony/iconblog/twitter.png" />
<img src="https://sites.google.com/site/blognyamastony/iconblog/twitter.png" />
<img src="https://sites.google.com/site/blognyamastony/iconblog/twitter.png" />
</div>

dan saya rasa cukup sekian Tutorial mengenai CSS float , untuk property CLEAR silahkan anda mencobanya sendiri .. dan semoga artikelnya bermanfaat ...