Jump to content
Üyelik kaydınızı yaparak son yazılan içeriklerden haberdar olun! ×

CSS

  • entries
    53
  • comments
    0
  • views
    1,341

CSS'de clear özelliği ve TailwindCSS Karşılığı


Doğuhan ELMA

37 views

CSS'de clear özelliği, bir öğenin kendisinden önce gelen yüzdürülmüş (floated) öğelerin etkisinden nasıl etkileneceğini belirler. Bir öğeye clear özelliği uygulandığında, bu öğe yüzdürülmüş öğelerin yanında değil, altında yer alacak şekilde konumlandırılır. Bu özellik, yüzdürme kullanıldıktan sonra oluşabilecek düzensizlikleri düzeltmek için sıklıkla kullanılır.

clear özelliği aşağıdaki değerleri alabilir:

none: Öğe yüzdürülmüş öğelerin etkisinden etkilenmez. Bu varsayılan değerdir.

left: Öğe, kendisinden önce gelen sol tarafta yüzdürülmüş öğelerin altında yer alır.

right: Öğe, kendisinden önce gelen sağ tarafta yüzdürülmüş öğelerin altında yer alır.

both: Öğe, kendisinden önce gelen hem sağda hem de solda yüzdürülmüş öğelerin altında yer alır. Bu, öğenin her iki taraftaki yüzdürme etkilerinden tamamen kurtulmasını sağlar.

Örneğin, bir paragrafın hemen önceki bir görsele (resme) göre konumlanmasını istemiyorsanız, bu paragrafa clear: both; özelliğini uygulayarak görsele göre konumlandırılmasını engelleyebilirsiniz.

 

.clearfix {
  clear: both;
}

 

Bu CSS kodu, .clearfix sınıfı uygulanan herhangi bir öğenin, kendisinden önce gelen hem sağda hem de solda yüzdürülmüş öğelerin altında yer almasını sağlar.

clear özelliği, özellikle eski web tasarım tekniklerinde yüzdürme kullanılarak oluşturulan düzenlerde yararlıdır. Ancak modern CSS düzen yöntemleri (Flexbox ve Grid gibi) daha fazla kullanılmaya başlandıkça, clear özelliğine olan ihtiyaç azalmıştır, çünkü bu yeni yöntemler daha sezgisel ve esnek düzenler sunar.

 

TailwindCSS:

Class
Properties
clear-start clear: inline-start;
clear-end clear: inline-end;
clear-left clear: left;
clear-right clear: right;
clear-both clear: both;
clear-none clear: none;

 

1.png

 

1.png

 

1.png

 

1.png

 

 

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...