CSS FLOAT Ve CLEAR Özelliği Kullanımı - WebCebir

CSS FLOAT Ve CLEAR Özelliği Kullanımı

Başlangıçta, web sayfasının öğelerini, html kodunda tanımlanan sırayla birbiri ardına yerleştirilir. Sayfadaki paragraf, başlık, liste vb... Etiketlerini yerleştirerek, bunları aynı sırayla görüyoruz. Fakat css'in bazı özelliklerinin yardımıyla bu düzeni değiştirebiliriz. Onlardan bir tanesi float özelliğidir.

Float kelimsenin Türkçe karşılığı "Şamandıra" , şamandıra kelime anlamı olarak yüzer cisim anlamına gelir. Float özelliği, bir kutunun (bir öğe) yüzülüp yüzmeyeceğini belirtir ve birbirine bitişik bloklar oluşturmak mümkündür. Float özelliği, bir öğeyi normal akışın dışına çıkarmanıza ve içeriği yan yana dizmenize olanak tanır. Elemanlar yatay olarak yüzer , yani bir eleman yalnızca sol ve sağ tarafında bulunması gerektiğini ve bununla birlikte metin ve satır içi öğelerin etrafına sarılmasını sağlar.

Not : Kesinlikle yerleştirilmiş öğeler float özelliğini yoksayar!

Not : Yüzen bir öğeden sonra bulunan öğeler çevrede dolaşacaktır. Bunu önlemek için clear özelliğini kullanın (sayfanın altındaki örneklere bakın).

CSS Sözdizimi :

float: none | left | right | initial | inherit;

Değerler :

• left :Element solda yer alır.
• right :Element sağda yer alır.
• none :Element oluştuğu yerde görüntilenir. Varsayalı değerdir.
• inherit :Element, üst float değerini devralır.

Float özelliğinin en basit kullanımı, metinleri resimlerin etrafına sarmak için kullanılabilir.

float:right;

Aşağıda ki örnekte bir metinin sola bir resmin sağa yaslanmasını gösterir.

HTML :

<p><img src="agac.jpg"/> Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</p>

CSS :

img{ float:right; }

float:left;

Aşağıda ki örnekte bir resmin sola yaslanmasını bir metninde sağa yaslanmasını gösterir.

img{ float:left; }

float:none;

Aşağıdaki örnekte, resim ve metnin normal akışında bulunduğu yerde görüntülenecektir float: none;

img{ float:none; }

Kutuları Yan Yana Dizmek

İki kutu oluşturalim birini sola birini sağa yaslayalım.

HTML :

<div class="kutu"></div> <div class="kutu1"></div>

CSS :

div{width:100px; height:100px; background-color:blue; } .kutu{float:left} .kutu1{float:right}

Kutular oluşturalım ve sola yaslıyarak, kutuları dizelim.

HTML :

<div class="kutu"></div> <div class="kutu"></div> <div class="kutu"></div> <div class="kutu"></div> <div class="kutu"></div> <div class="kutu"></div> <div class="kutu"></div> <div class="kutu"></div>

CSS :

div{width:150px; height:150px; background-color:blue; margin:10px; } .kutu{float:left}

Kutular yan yana dizerken kutular sayfaya sığmazsa bir alt satıra geçer.

İki kutuyu sola ve bir kutuyu sağa yaslıyalım ortaya metin ekleyelim.

HTML :

<section> <div class="left">1</div> <div class="left">2</div> <div class="right">3</div> <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye desıçramıştır.</p> </section>

CSS :

section { border: 1px solid blue; } div { margin: 5px; width: 50px; height: 50px; } .left { float: left; background:#6495ED; } .right { float: right; background:#008080; }

Clear Özelliği

Css'de clear özelliği float özelliğini iptal etmek için kullanılır bu sayede sitemizin kodları normal akışını girer.

clear özelliği aşağıdaki değerlerden birine sahip olabilir:

• none :Her iki tarafta yüzen öğelere izin verir. Bu varsayılan değer
• left :Soldaki akışı iptal eder.
• right :Sağdaki akışı iptal eder.
• both :Sol ve sağ tarafların akışını iptal eder.
• inherit :Eleman, üst öğesinin değerini devralır.

CSS Sözdizimi:

clear: both | left | right | none | inherit;

CSS :

div { clear:both; }

CSS Float hatası ve çözümü clearfix Hack

Bir eleman onu içeren elemandan daha uzunsa ve float verilmiş elemansa, kabın dışına taşacaktır.

DIV elemana overflow:auto; css özelliğini eklersek sorunu çözeriz.

HTML :

<div class="clearfix"> <img class="img" src="agac.jpg" alt="ağaç"> Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.</div>

CSS :

div { border: 3px solid #4CAF50; padding: 5px; } img { float: right; } .clearfix { overflow: auto; }

overflow:auto temizleme düzeltmesi, kenar boşluklarınızı ve dolguyu kontrol altına alabildiğiniz sürece iyi çalışır (başka şekilde kaydırma çubuklarını görebilirsiniz). Yeni ve modern kod olarak Clearfix kullanımı daha güvenlidir, ve aşağıdaki kod örneği çoğu web sayfaları için kullanılır:

CSS :

.clearfix::after { content: ""; clear: both; display: table; }

Bir element üzerinde display: flow-root'u kullanmak, bu temizlemeyi bizim için yapar. Clearfix hack komutunu uygulamak yerine, class'ımızda CSS display özelliğini flow-root değeriyle kullanabilirsiniz.

CSS :

.clearfix{ display: flow-root; }

Not :Yukarıda ki css kodu ie11 ve modern tarayıcılar destekler.

Mehmet Furkan Dalfidan 23/09/2020

Clear floatın etkisini kaldırıyorsa float:none da aynı işlevi görmez mi görüyorsa neden kullanılmıyor?

yönetici 26/09/2020

Mehmet, kullanılmaz none, yok demektir. float'ın özelliklerini sıfırlar.

Berfin Sezer 08/03/2021

display:flex ile yan yana getiremediklerimi float:left ile getirdim şimdi ortalamaya çalışıyorum margin:auto dedim fakat olmadı ne yapabilirim

yönetici 11/03/2021

Berfin, şunları dene: Kutulara width özelliği vermediysen tarayıcı hesaplamayadığı için ortalamaz. width özelliği ver dene. Birde position:relative ver dene. position: relative; margin: auto; css div ortalama diye google'dan aratmalar yap. Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

2982

Gönder