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: