İçeriğe atla
Üyelik kaydınızı yaparak son yazılan içeriklerden haberdar olun! ×

CSS

  • makale
    57
  • yorum
    0
  • görüntüleme
    2.249

CSS'te "float" Layout ve TailwindCSS Sınıf Karşılığı


Doğuhan ELMA

95 görünüm

CSS'te "float" düzeni, bir öğenin sayfadaki normal akıştan çıkarılmasını ve sayfa içeriğinde sağa veya sola yaslanmasını sağlar. Bu, metin veya diğer öğelerin yüzen öğenin etrafında akmasını sağlar. "Float" özelliği, web sayfalarında düzen oluşturmak, görselleri metinle hizalamak veya sütun bazlı tasarımlar oluşturmak için sıkça kullanılır.

CSS'de "float" özelliği şu şekilde kullanılabilir:

.element {
  float: left; /* ya da right */
}

Bu örnekte, .element sınıfına sahip bir HTML öğesi sayfanın sol (veya sağ) tarafına yaslanacak ve içeriği bu öğenin etrafında akacaktır. "Float" kullanımının ardından, genellikle "clearfix" teknikleri kullanılarak yüzdürme etkisinin altındaki öğeler üzerindeki potansiyel düzensizlikler düzeltilir.

"Float" kullanımı modern web tasarımında Flexbox ve CSS Grid gibi daha yeni düzen yöntemlerinin ortaya çıkışıyla biraz azalmıştır. Flexbox ve Grid, daha karmaşık ve esnek düzenler oluşturmanın yanı sıra sayfa düzenini daha sezgisel ve yönetilebilir hale getirir. Ancak, bazı durumlarda, özellikle basit hizalamalar ve düzenler için, "float" hala kullanışlı olabilir.

 

TailwindCSS:

Class
Properties
float-start float: inline-start;
float-end float: inline-end;
float-right float: right;
float-left float: left;
float-none float: none;

 

1.png

 

1.png

 

1.png

 

 

0 Yorum


Önerilen Yorumlar

Görüntülenecek yorum yok.

Misafir
Yorum ekle...

×   Zengin metin olarak yapıştırıldı.   Bunun yerine düz metin olarak yapıştır

  Yalnızca 75 emojiye izin verilir.

×   Bağlantınız otomatik olarak gömüldü.   Bunun yerine bağlantı olarak görüntüle

×   Önceki içeriğiniz geri yüklendi.   Düzenleyiciyi temizle

×   Görüntüleri doğrudan yapıştıramazsınız. URL'den resim yükleyin veya ekleyin.

×
×
  • Create New...