Css Float ve Clear

Css de float kavramını size şu şekilde anlatmak istiyorum.Gördüğünüz üzere benim sitemde 2 adet bölüm var birinci kısımda haberler ikinci kısımda ise bloklarım var yani sağ ve sol olarak iki kısıma ayrılmış durumda bu ayırma işlemini yani birisini sağa birisini sola koyma işlemini float ile yapıyoruz.

Tabiki float ile sadece bunu yapmıyoruz bir resmin etrafını yazı ile çevirmek içinde float kullanıyoruz.Mesela benim haber resimlerinde float left uygulanmış durumda uygulamasaydık bu şekilde yazının soluna yapışmazdı.Nesneleri yan yana dizmek içinde float kullanıyoruz.

Kısacası floatı tanımlıycak olursak float css de bir konumlandırma komutu diyebiliriz.Yani bir div oluşturduğunuzda bunlar default olarak alt alta sıralanırlar bunları yan yana veya işte divleri sağa sola koymamız için float komutunu kullanırız.Float kullanımı şu şekildedir ya float:left; dersiniz yada float:right; dersiniz none ve inherit seçenekleride var ama onlar bizim işimize pek yaramıyor arkadaşlar.

Peki ya clear nedir dediğinizi duyar gibiyim clear floattan ayıran diyebiliriz yani float kullandık bu başka nesneleride etkiliyosa etkilemesini engellemek için clear kullanıyoruz.

Gelin şimdi örnekle görelim ;

Html Kodları :

<div class="ornek1">Yan Yana</div>
<div class="ornek1">Yan Yana</div>
<div class="temizle"></div>
<div class="sol">Sol</div>
<div class="sag">Sağ</div>
<div class="temizle"></div>
<div class="yazi"> 
<p> 
 <img src="http://daniskaner.com/uploads/posts/2013-09/1378525670_css.png"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec malesuada nisi, suscipit lobortis massa. Donec tempor tempus suscipit. Sed aliquet massa pulvinar tortor accumsan, ultricies pharetra justo ultrices. Nunc sit amet sapien et tortor rhoncus imperdiet vitae quis tellus. Sed aliquam rhoncus erat, in pellentesque nunc tincidunt sed. Sed a consequat eros. Fusce in mauris et sapien facilisis volutpat. Phasellus nec urna scelerisque arcu aliquet feugiat auctor eu urna. Proin hendrerit urna vel lorem porta, a sollicitudin lectus ullamcorper.
</p>
</div>
<div class="temizle"></div>
<div class="yazi2"> 
<p> 
 <img src="http://daniskaner.com/uploads/posts/2013-09/1378525670_css.png"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec malesuada nisi, suscipit lobortis massa. Donec tempor tempus suscipit. Sed aliquet massa pulvinar tortor accumsan, ultricies pharetra justo ultrices. Nunc sit amet sapien et tortor rhoncus imperdiet vitae quis tellus. Sed aliquam rhoncus erat, in pellentesque nunc tincidunt sed. Sed a consequat eros. Fusce in mauris et sapien facilisis volutpat. Phasellus nec urna scelerisque arcu aliquet feugiat auctor eu urna. Proin hendrerit urna vel lorem porta, a sollicitudin lectus ullamcorper.
</p>
</div>

Css Kodları :

body {
background-color:#325780;
}
div {
background-color:#FFF;
width:200px;
border:1px solid #000;
font:bold 22px/100px Tahoma;
text-align:center;
}
.temizle {
clear:both;
}
.ornek1 {
float:left;
margin:1px;
}
.sol {
float:left;
}
.sag {
float:right;
}
.yazi img {
float:left;
margin:0 7px 2px 0;
}
.yazi2 img {
float:right;
margin:0 7px 2px 0;
}
.yazi,.yazi2 {
width:400px;
line-height:20px;
font:11px Tahoma;
text-align:justify;
}

Uygulamalı Görünüm

Arkadaşlar 1. örnekte float left ile nesneleri yan yana dizdik 2. örnekte float left ve float right ile sağa ve sola konumlandırdık 3. örnekte ise resmimizi float left ile yazımızın soluna hizaladık 4.örnekte float right ile ise sağına hizaladık

Clear komutumuzu yani clear:both; işlemini temizle isimli bir klasa atadık ve  divleri birbirlerinden ayırmak için kullandık html kısmında görebilirsiniz.Eğer arkadaşlar clear kullanmasaydım iç içe geçerdi hepsi saçma sapan bir görüntü oluşurdu.

Umarım anlatabilmişimdir kolay gelsin.