CSS’de Float ve Clear Özelliği

Tablosuz tasarımda iskelet oluştururken en sağlıklı konumlandırma işlemi float ve clear ile olur. Kimi tasarımcılar sadece posizyon belirterek yapmayı tercih ederler. Ama bu nereye kadar? Ve oldukça sağlıksız bir uygulama. Biz en sağlıklı olan, işimizi en iyi görecek olan yöntemi seçmeliyiz.

Unutmayın, her açılan float özelliğine ait elementin altına clear ile biçimlendirilmiş başka bir element getirmenizi öneriyorum. Bunun sebebi daha önce kutu modelinde işlediğimiz konumlandırmanın kayması sorununu çözmektir.

Float bir seçiciyi nerede konumlayacağınızı belirtmek için kullanacağımız özelliktir. Float özelliği 3 değer alabilir.

  • left
  • right
  • none

Değerlerden de anlayacağınız gibi ya sağa yada sola konumlandırabilir, yada serbest bırakabilirsiniz. Serbestten kasıt default değer olan yine soldur. Peki bir seçiciye float özelliğini nasıl aktaracağız? Bu işlemin genel kullanım kalıbı şöyledir;

float: left;
float: right;

Şimdi gelelim Clear özelliğine. Clear bir float elementini temizlemeye ve ana alan ile konumlanmış alanı eşitlemekle görevlidir. Bunun içinde,

  • left
  • right
  • both
  • none

Bu dört değerden birisini verebilirsiniz. Şimdi biraz işin püf noktasına girelim. Aşağıdaki kod bloklarını inceleyerek float özelliğinin alacağı clear değerlerini anlamaya çalışınız.

float: left;
clear: left; /*both*/

Sadece float: left olan bir layout(-lar) için clear: left yada clear: both kullanılmalıdır.

float: right;
clear: right; /*both*/

Sadece float: right olan layout(-lar) için clear: right yada clear: both kullanılmalıdır.

float: left;
float: right;
clear: both;

Bir float: left ve birde float: right olmak üzere iki yada daha fazla layout için clear: both kullanılmalıdır. Basit bir örnek yapmak gerekirse;

<style type="text/css">
#ana {
              background: #f0f0f0;
              width: 434px;
              border: 1px solid #aaa;
       }
/* Sol iskelet */
#ana .sol {
              float: left;
              margin: 10px 5px 10px 10px; /* üst sağ alt sol */
       }
/* Sag iskelet */
#ana .sag {
              float: right;
              margin: 10px 10px 10px 5px;
       }
/* Ortak özellikler tanımlanıyor */
#ana .sol, #ana .sag {
              width: 200px;
              height: 50px;
              background: #fff;
              border: 1px solid #aaa;
       }
/* Clear özelliği aktarılıyor */
#ana .temizle {
              clear: both; /* left ve right olduğundan both */
              font-size: 0;
              line-height: 0;
              height: 0;
       }
</style>

<div id="ana">
       <div class="sol"></div>
       <div class="sag"></div>
       <div class="temizle"></div>
</div>

Bol CSS’li günler. :)

Bir önceki yazımız olan Tasarımsal Seo Mantığı Nasıl Olmalıdır başlıklı makalemizi de okumanızı öneririz.

Etiketler:, ,

Yorum yaz

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>