float
mülkiyet unsuru yüzer gerekip gerekmediğine belirtir.
clear
mülkiyet yüzen elementlerin davranışını kontrol etmek için kullanılır.
şamandıra Mülkiyet
En basit Kullanımda, float
mülkiyet görüntüleri metin etrafında sarmak için kullanılabilir.
Aşağıdaki örnek bir görüntü bir metinde sağa yüzer gerektiğini belirtir:
clear Mülkiyet
clear
mülkiyet yüzen elementlerin davranışını kontrol etmek için kullanılır.
Yüzen bir öğeden sonra Elemanları etrafında akacaktır. Bunu önlemek için, kullanmak clear
özelliğini.
clear
mülkiyet hangi unsurları yüzen bir elementin yanları dalgalanmasına izin verilmez belirtir:
clearfix Hack - overflow: auto;
bir eleman olarak içeren eleman daha uzun olduğu ve bu yüzdürülerek, bu kabı dışında taşma.
Sonra ekleyebilir overflow: auto;
içeren elemana bu sorunu çözmeye yönelik:
Web Düzeni Örneği
Kullanarak tüm web düzenleri yapmak yaygındır float
özelliğini:
Örnek
div {
border: 3px solid blue;
}
.clearfix {
overflow: auto;
}
nav {
float: left;
width: 200px;
border: 3px solid #73AD21;
}
section {
margin-left: 206px;
border: 3px solid red;
}
Kendin dene " Diğer Örnekler
Bir paragrafta sağa yüzer sınır ve marjlar ile bir görüntü
Bir paragrafta sağa bir görüntü şamandıra edelim. Resme kenarlık ve kenar boşluklarını ekleyin.
Sağa yüzen bir resim yazısı ile bir görüntü
sağa bir altyazı şamandıra ile bir görüntü olsun.
Soldaki bir paragraf şamandıra ilk harfini edelim
Soldaki bir paragraf şamandıra ilk harfini edelim ve mektup stil.
Yatay menü oluşturma
yatay menü oluşturmak için köprüler listesiyle şamandıra kullanın.
Tablo kullanmadan ana sayfaya
Bir altbilgi, sol içerik ve ana içeriğe sahip bir ana sayfası oluşturmak için şamandıra kullanın.
Tüm CSS Float Özellikleri
özellik | Açıklama |
---|---|
clear | Yüzen unsurlar dalgalanmasına izin verilmeyen bir elemanın hangi tarafta belirtir |
float | bir eleman yüzer gerektiğini olup olmadığını belirtir |
overflow | İçerik bir elemanın kutusunu taşıyor ne olacağını belirtir |
overflow-x | o elemanın içeriği alanı aşarsa içeriğin sol / sağ kenarları ne yapılacağını belirtir |
overflow-y | o elemanın içeriği alanı aşarsa içeriğin üst / alt kenarları ne yapılacağını belirtir |