CSS float ve clear Özellikleri Nelerdir ve Nasıl Uygulanırlar?
CSS float ve clear özellikleri web sayfaları düzenlemesinde sıkça kullanılan özelliklerdir. Şimdi bu özellikleri görelim.
float Özelliği
Yapısı: float: <deger>
Aldığı Değerler: left | right | none | inherit
Başlangıç Değeri: none
Uygulanabilen Elemanlar: Tüm elemanlar
Kalıtsallık: Yok
CSS ile web sitesi kodlamanın en önemli özelliklerinden iki tanesi float ve clear özellikleridir. Float bir elemanı normal akışın dışına çıkarmak için kullanılan bir yöntemdir. Birbiri ardına sıralanmış elemanlara float uygulandığında elemanlar eğer yeterli alan varsa yan yana dizilirler. Float dinamik göreceli konumlandırma gibidir ve bu amaçla kullanılabilir.
float özelliği bir elemanı (img, table, div vb.) konumunu belirlemek (sağa veya sola ) için kullanılır. Bir elemana flaot:left değeri verirseniz diğer elemanlar o elemanın sağından akar. Float özelliği CSS ile tablosuz web sitesi oluşturma metodunun en önemli ögelerinden biridir.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> float Özelliği </title>
<style>
p img {
float: right;
margin: 25px;
}
</style>
</head>
<body>
<p> <img src="resim.jpg" width="250" height="165" alt="Memleket" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce eu nisi at sapien semper tincidunt. Maecenas vel leo. Phasellus condimentum, felis eget rutrum aliquam, augue dolor commodo enim, eu vestibulum lacus tellus vitae ante. Praesent accumsan elit ac elit. Cras sagittis sagittis elit. Duis odio metus, aliquam et, feugiat vel, interdum eu, nisl. Vestibulum ut velit. Nulla placerat. Vivamus eleifend placerat neque. Nam risus massa, interdum ut, vulputate mattis, sagittis non, dolor. Vivamus pretium justo quis nunc. Nullam molestie, nisi quis aliquet vulputate, elit metus port libero, vel laoreet ante massa suscipit justo. Nullam hendrerit scelerisque tellus. Nulla porta, est sed imperdiet consectetuer, dui urna laoreet nibh, a varius sapien nisi vel nisl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eu libero ut lectus tempor lacinia. Nulla facilisi. </p>
</body>
</html>
Bir elemana float uygulandığında, float uygulanan kutu kapsayıcı kutunun veya diğer float kutusunun dış kenarının sağına veya soluna kaydırılabilir. Float uygulanan kutu, dokümanın normal akışının dışına çıkacaktır. Dokümandaki normal kutular float elemanı burada yokmuş gibi normal akışına devam edeceklerdir.
clear Özelliği
Yapısı: clear: <deger>
Aldığı Değerler: none | left | right | both
Başlangıç Değeri: tanımsız
Uygulanabilen Elemanlar: Tüm elemanlar
Kalıtsallık: Yok
clear özelliği ile float uygulanmış elemandan sonraki elemanlara float etkisini durdurmamız mümkündür. Örneğin iki paragrafınız olsun ve bunlardan sadece ilkini float uygulanmış elemanın yanına koymak istiyorsunuz, bu durumda ikinci paragrafa clear özelliği atadığınızda bu eleman float uygulanmış elemanın altında konumlanacaktır.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> clear Özelliği </title>
<style type="text/css">
#sol
{
width: 100px;
float: left;
background: #A2E7D7;
padding: 1px;
margin:0;
}
#temizle
{
clear: left;
border: 1px solid #000;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce eu
nisi at sapien semper tincidunt. Maecenas vel leo. Phasellus condimentum, felis eget rutrum aliquam, augue dolor commodo enim, eu vestibulum lacus tellus vitae ante. Praesent accumsan elit ac elit. </p>
<p id="sol">Cras sagittis sagittis elit. Duis odio metus, aliquam et, feugiat vel, interdum eu, nisl. Vestibulum ut velit. Nulla placerat. Vivamus eleifend placerat neque. </p>
<p>Nam risus massa, interdum ut, vulputate mattis, sagittis non, dolor.
Vivamus pretium justo quis nunc. Nullam molestie, nisi quis aliquet
vulputate, elit metus porta libero, vel laoreet ante massa suscipit justo.
Nullam hendrerit scelerisque tellus. </p>
<p id="temizle"><code>clear: left</code> uygulanan eleman.</p>
<p>Nulla porta, est sed imperdiet consectetuer, dui urna laoreet nibh, a varius sapien nisi vel nisl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eu libero ut lectus tempor lacinia. Nulla facilisi.</p>
</body>
</html>
CSS float ve clear özellikleri konusunu gördük. Konu ile ilgili soru, öneri ya da fikirlerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.
https://yazilimdelisi.com/category/web-gelistirme/css/
Sosyal Medya Hesaplarımız
