Bu derste float kodunu görecez.İşlevinden başlayalım.Block elementleri yan yana sıralamak için kullanırız.Bildiğiniz gibi block elemnetlere width de versek gidebildikleri kadar gider.İşte burda float ile ard arda sıralıyoruz.Bu float olayında dikkat etmemiz gereken float verdiğimiz elemanın hemen ardından clear kullanmalıyız.Yoksa diğer elemanları bozar.
Float 2 değer alır.
1-
left = sol
2-
right =sağ sıralamak için
Bir örnek yapalım.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.kutu{width:100px;height:100px;background:green;float:left;margin-left:5px;}
.temiz{clear:both;}
</style>
</head>
<body>
<div class="kutu">1</div>
<div class="kutu">2</div>
<div class="kutu">3</div>
<div class="kutu">4</div>
<div class="kutu">5</div>
<div class="temiz"></div>
</body>
</html>
Görüntüsü :
Burda ne yaptık.5 tane kutu clası olan div yaptık.Normalde float vermesek alt alta olacaktık ama biz floatla sola ard arda sırala dedik.Daha boş olsun diye hepsi soldan 5 px dış boşluk bıraksın dedim.
Kutuların el altına temiz clası olan div yaptım.Niye çünkü diğer kullanacağımız objelere artık float bitti demek için.
.temiz{clear:both;}
Bu hem sağ temizleme hem sol temizleme yapar.
Tek taraflı temizleme için left yada right verebilirsiniz.
UstaDerslik
