CSS kayan nokta Özellik
Örnek
Bir görüntünün sağa kaymasına izin verin:
img
{
float: right;
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Özellik , floatbir öğenin sola mı, sağa mı yoksa hiç mi yüzmeyeceğini belirtir.
Not: Kesinlikle konumlandırılmış öğeler floatözelliği yok sayar!
Not: Kayan bir öğenin yanındaki öğeler, onun etrafından akacaktır. Bunu önlemek için clear özelliğini veya clearfix hack'i kullanın (bu sayfanın altındaki örneğe bakın).
| Varsayılan değer: | Yok |
|---|---|
| Miras: | Hayır |
| canlandırılabilir: | Hayır. Canlandırılabilir hakkında bilgi edinin |
| Sürüm: | CSS1 |
| JavaScript sözdizimi: | nesne .style.cssFloat="sol" |
Tarayıcı Desteği
Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
| Property | |||||
|---|---|---|---|---|---|
| float | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
CSS Sözdizimi
float: none|left|right|initial|inherit;
Mülk değerleri
| Value | Description | Play it |
|---|---|---|
| none | The element does not float, (will be displayed just where it occurs in the text). This is default | |
| left | The element floats to the left of its container | |
| right | The element floats the right of its container | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Daha fazla örnek
Örnek
Bir görüntünün sola kaymasına izin verin:
img
{
float: left;
}
Örnek
Resmin metinde olduğu yerde görüntülenmesine izin verin (kayan nokta: yok):
img
{
float: none;
}
Örnek
Bir paragrafın ilk harfinin sola kaymasına izin verin ve harfe stil verin:
span {
float: left;
width:
0.7em;
font-size: 400%;
font-family: algerian, courier;
line-height: 80%;
}
Örnek
Yatay bir menü oluşturmak için bir köprü listesiyle birlikte kayan noktayı kullanın:
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
Örnek
Üstbilgi, altbilgi, sol içerik ve ana içerik içeren bir ana sayfa oluşturmak için kayan noktayı kullanın:
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
Örnek
Belirtilen <p> öğesinin solunda veya sağında kayan öğelere izin vermeyin:
img {
float: left;
}
p.clear {
clear: both;
}
Örnek
Yüzen bir eleman, içerdiği elemandan daha uzunsa, kabının dışına taşacaktır. Bunu "clearfix hack" ile düzeltmek mümkündür:
.clearfix::after {
content: "";
clear: both;
display: table;
}
İlgili Sayfalar
CSS eğitimi: CSS Float
HTML DOM referansı: cssFloat özelliği