CSS FLOAT , CLEAR ÖZELLİKLERİ

Merhaba...

Html sayfalarda satır içi elemanlar varsayılan olarak soldan sağa yerleşirken , BLOK elemanlar yukarıda aşağıya doğru yerleşirler. Float özelliği ile bu yerleşim yönleri değiştirilebilir..

FLOAT

Float akış anlamına gelir. Elemanların hangi yönde yerleşeceğini belirler. RIGHT ve LEFT olmak üzere 2 farklı yön belirleyebilir. Varsayılan değeri normal akışa müdahale etmeyen "none" değeridir.. 

LEFT

Elemanlara float:left değeri verildğinde yerleşimler soldan sağa doğru olur. Özelliğin uygulandığı eleman satır içi eleman ise , görünümde bir değişiklik olmaz çünkü varsayılan yerleşim yönüdür. Ancak BLOK elemanlara uygulanırsa , bu elemanlar yukarıdan aşağıya doğru değilde ,  satır içi elemanlar gibi soldan sağa yerleşirler.

CSS

div { float:left; width:50px;height:50px; background-color:skyblue;}

HMTL

<div> Div 1 </div>
<div> Div 2 </div>
<div> Div 3 </div>

EKRAN

Yukarıdaki divlere FLOAT:LEFT özelliği verildiği için soldan sağa doğru yerleşirler. Aslında INLINE-BLOCK elemanlara dönüşmüş olurlar. 

Kapsayıcı içindeki elemanlara FLOAT özelliği eklendiğinde, kapsayıcı içeriğe göre otomatik uzamayacaktır. Bu durumda kapsayıcıya yükseklik değeri eklemeniz gerekebilir...

RIGHT

Elemanlara float:right değeri verildğinde yerleşimler sağdan sola doğru olur.  Başka deyişle FLOAT:RIGHT özelliği alan eleman sağdan sola yerleşecektir.

CSS

div { float:right; width:50px;height:50px; background-color:skyblue;}

HMTL

<div> Div 1 </div>
<div> Div 2 </div>
<div> Div 3 </div>

EKRAN

Yukarıdaki divlere FLOAT:RIGHT özelliği verildiği için sağdan sola  doğru yerleşirler. Aslında sağdan yerleşmeye başlayan  INLINE-BLOCK elemanlara dönüşmüş olurlar. 

Kapsayıcı içindeki elemanlara FLOAT özelliği eklendiğinde, kapsayıcı içeriğe göre otomatik uzamayacaktır. Bu durumda kapsayıcıya yükseklik değeri eklemeniz gerekebilir...

LEFT & RIGHT 

Bazen farklı elemanlara  left ve right değerleri verilebilir. Bu durumda left değeri alanlara sola , right değeri alanlar sağa yerleşirler..

CSS

div.left {  float:left; width:50px;height:50px; background-color:skyblue;}
div.right  { float:right; width:50px;height:50px; background-color:skyblue;}

HMTL

<div class="right"> Div 1 </div>
<div class="left"> Div 2 </div>
<div class="right"> Div 3 </div>
<div class="left"> Div 4 </div>

EKRAN

Yukarıdaki divlere HTML'deki normal akıştan farklı olarak , left ve right özelliklerine göre sola yada sağa yerleşirler..

CLEAR

Html sayfada bir elemana FLOAT değeri normal akıştan ayrılmışi olur. Dolayısyla kendisinden sonra gelen elemanlara eğer FLOAT değeri verilmemişse bu elemanlar FLOAT uygulanmış eleman yokmuş gibi yerleşirler... Bu tür durumlarla karşılaşmamk için , Float özelliğini bitirmek için sıoradaki elemana CLEAR özelliği verilir. Böylece float akışı bitirilmiş olur..  

• LEFT   (float:left akışını bitirir)
• RIGHT   (float:right akışını bitirir)
• BOTH   (hem float:left hemde float:right  akışını bitirir)

olmak üzere 3 değer alır..

CSS

div.left {  float:left; width:50px;height:50px; background-color:skyblue;}
div.normal {height:70px; background-color:orange;}

HMTL

<div class="left"> Div 1 </div>
<div class="left"> Div 2 </div>
<div class="normal"> Div 3 </div>

EKRAN

Yukarıdaki ilk 2 div'e float left dğeri verildiği için yanyana sıralanırlar. Ancak 3. div (turuncu) herhangi bir float değeri almadığı için , ilk 2 div'den farklı olarak sayfanın normal akışına göre yerleşir. Dolayısıyla üstteki bozuk görüntü ortaya çıkar.. Bunu engellemek için  turuncu div'e clear özelliği eklenmelidir. Kendinden önceki elemanlar sadece left yerleşimi aldıkları için , clear:left yazmak yeterli olacaktır. Bu artık left akışını bitir ve normal yerleşime dön anlamına gelir.

O zaman yukarıdaki görüntüyü düzeltmek için .normal class'lı turuncu dive clear ekleyelim..

CSS

 div.normal {clear:left;height:70px; background-color:orange;}

EKRAN

Turuncu div'e clear uygulandığı için kendinden önceki FLOAT akışı sonlanmış olur ve sayfanın normal akışına göre yerleşim devam eder.  

Görüşmek üzere...