css clear özelliği, html elemanına atanmış olan kayma özelliğini temizlemek için kullanılır. Bu özelliği öğrenmeden önce css float özelliğini bilmeniz daha isabetli olur. Çünkü kayma özelliğini float ile değiştirdiğimiz için onu öncelikle öğrenmelisiniz.
float özelliğine left veya right değeri verildiğinde dikkat edilmesi gereken bir durum vardır. Daha sonraki elemanları da kaydırır. Çünkü akışını değiştirmiş oluyoruz. Bundan dolayı css clear özelliği kullanarak sayfa akışı eski haline getirmek gerekir.
clear : both şeklinde kullanıldığında düzeltmiş oluruz. float özelliğini kullandığımız bölümden hemen sonrasında kullanılır. Eğer sola hizalı iken belirli bir elemanı sola en baştan başlatmak istersek clear:left kullanılır. Eğer sağa hizalı ise de clear:right ile de sağ en baştan başlatırız.
Aldığı değerler :
none : Değer yok.
left : Sola temizler. Yani sola kaydırır.
right : Sağa temizler. Yani sağa kaydırır.
both : Her iki yönü temizler.
initial : Varsayılan değere çevirir.
Örnek: clear : left özelliği
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div p { float: left; margin: 5px;}
.three{ clear:left; }
</style>
</head>
<body>
<div>
<p class="one"> HTML </p>
<p class="two"> CSS </p>
<p class="three"> JS </p>
<p class="four"> ASP </p>
<p class="five"> PHP </p>
</div>
</body>
</html>Html çıktısı:
Örnek: clear : right özelliği
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div p { float: right; margin: 5px;}
.three{ clear:right; }
</style>
</head>
<body>
<div>
<p class="one"> HTML </p>
<p class="two"> CSS </p>
<p class="three"> JS </p>
<p class="four"> ASP </p>
<p class="five"> PHP </p>
</div>
</body>
</html>Html çıktısı:
Örnek:
Örnek 3 : float özelliğine left veya right verildiğinde clear:both yaptığımızda her iki yönü temizler.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.first div { float: left; margin: 5px;}
.first .three{ clear:both; }
.second div { float: right; margin: 5px;}
.second .three{ clear:both; }
.clearfix{ clear: both;}
</style>
</head>
<body>
<div class="first">
<div class="one"> HTML </div>
<div class="two"> CSS </div>
<div class="three"> JS </div>
<div class="four"> ASP </div>
<div class="five"> PHP </div>
</div>
<div class="clearfix"></div>
<div class="second">
<div class="one"> HTML </div>
<div class="two"> CSS </div>
<div class="three"> JS </div>
<div class="four"> ASP </div>
<div class="five"> PHP </div>
</div>
<div class="clearfix"></div>
<div class="thirty">
<div class="one"> thirty one </div>
</div>
</body>
</html>Html çıktısı:
Örnekte clearfix div ini kullanarak first, second ve thirty div lerinin akışını düzeltmiş olduk. Eğer kullanmasaydık thirty class ına sahip div second class ına sahip div in soluna yerleşecekti. Çünkü second div ini sağa kadırdığımızda solu boş kalıyor ve oraya bir alttaki element kayıyor.
Başka bir yazımızda görüşmek üzere…
