CSS Düzeni - yüzdür ve temizle
CSS floatözelliği, bir öğenin nasıl yüzeceğini belirtir.
CSS clearözelliği, temizlenen öğenin yanında ve hangi tarafta hangi öğelerin yüzebileceğini belirtir.
şamandıra Özelliği
Özellik float, içeriği konumlandırmak ve biçimlendirmek için kullanılır; örneğin, bir görüntünün bir kap içindeki metnin solunda kaymasına izin verin.
Özellik floataşağıdaki değerlerden birine sahip olabilir:
-
left- Öğe, bulunduğu kabın solunda yüzer -
right- Öğe, bulunduğu kabın sağında yüzer -
none- Öğe havada durmaz (metinde geçtiği yerde görüntülenecektir). Bu varsayılan -
inherit- Öğe, ebeveyninin kayan nokta değerini devralır
En basit kullanımında floatözellik, görüntülerin etrafına metin sarmak için kullanılabilir.
Örnek - kayan nokta: sağ;
Aşağıdaki örnek, bir görüntünün metinde sağa kayması gerektiğini belirtir:
Acının kendisi aşktır, ana depolama sistemidir. Phasellus imperdiet, hayır ve bazen söylendi, ama nefret eksikliği Maecenas hayrandır, intikamcıdır ve yemek pişirmez, kitle yaşamının yazarıdır.
Örnek
img {
float: right;
}
Örnek - kayan nokta: sol;
Aşağıdaki örnek , bir metinde görüntünün sola kayması gerektiğini belirtir:
Acının kendisi aşktır, ana depolama sistemidir. Phasellus imperdiet, hayır ve bazen söylendi, ama nefret eksikliği Maecenas hayrandır, intikamcıdır ve yemek pişirmez, kitle yaşamının yazarıdır.
Örnek
img {
float: left;
}
Örnek - Float yok
Aşağıdaki örnekte resim, metinde olduğu yerde görüntülenecektir (kayan: yok;):
Acının kendisi aşktır, ana depolama sistemidir. Phasellus imperdiet, hayır ve bazen söylendi, ama nefret eksikliği Maecenas hayrandır, intikamcıdır ve yemek pişirmez, kitle yaşamının yazarıdır.
Örnek
img {
float: none;
}
Örnek - Yanyana Yüzer
Normalde div öğeleri üst üste görüntülenecektir. Ancak, kullanırsak float: left, öğelerin yan yana yüzmesine izin verebiliriz:
Örnek
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}