CSS Float Komutu ile Kutu Hizalama

float özelliği, bir öğeyi sayfanın normal akışından çıkararak, diğer öğelerin etrafında yüzmelerini sağlar. Bu özellik, özellikle içerik akışından kaldırılan öğenin konumunu belirlemek için kullanılır.

İşte float özelliğinin kullanımı:

div {
  float: left; /* Öğeyi sola yatık hale getirir ve diğer içerik sağında akar */
}

Bu örnekte, div öğesi sola yatık bir şekilde konumlandırılmıştır. Bu durumda, öğe normal akıştan çıkarılmış ve içeriği sağında akan diğer öğelerin soluna yatmıştır.

float kullanırken dikkate almanız gereken bazı noktalar şunlardır:

• float kullanılan öğe, normal akıştan çıkar ve içeriği etrafındaki diğer öğelerin etrafında yüzer.
• float kullanan bir öğenin üstteki öğelerle olan ilişkisini kontrol etmek için clear özelliği kullanılabilir.
• float kullanılan öğelerin iç içe geçmesi durumunda, üstteki öğe ile olan ilişkiyi düzenlemek için clear kullanılabilir.

Örnek:

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

.float-left {
  float: left;
}

.float-right {
  float: right;
}

HTML:

<div class="clearfix">
  <div class="float-left">Solda Yüzen İçerik</div>
  <div class="float-right">Sağda Yüzen İçerik</div>
</div>

Bu örnekte, float-left ve float-right sınıflarına sahip iki öğeyi clearfix sınıfı içinde kullanarak, yatayda iki öğeyi yan yana getirmiş ve clearfix ile temizlenmiş.