CSS'deki floatözellik, web sayfalarında konumlandırma ve mizanpaj için kullanılır.
.module ( float: left; )Değerler
none: öğe yüzmez. Bu başlangıç değeridir.left: öğeyi, kapsayıcısının solunda yüzer.right: öğeyi, kapsayıcısının sağında yüzer.inherit: öğe, üst öğesinin kayan yönünü devralır.
display: block;
Float Ne Anlama Geliyor?
Amacını ve kökenini anlamak floatiçin baskı tasarımına bakabiliriz. Bir baskı düzeninde, resimler, gerektiğinde metnin etrafına sarılacağı şekilde sayfaya yerleştirilebilir. Bu genellikle ve uygun bir şekilde "metin kaydırma" olarak adlandırılır. İşte bunun bir örneği.
Sayfa düzeni programlarında, metni tutan kutulara metin sarmaya uyması veya yok sayması söylenebilir. Metin sarmayı göz ardı etmek, kelimelerin görüntünün üzerinde sanki orada yokmuş gibi akmasına izin verecektir. Bu, görüntünün sayfanın akışının bir parçası olması (veya olmaması) arasındaki farktır. Web tasarımı çok benzer.
Web tasarımında, floatkendilerine uygulanan CSS özelliğine sahip sayfa öğeleri , metnin çevrelerinde aktığı yazdırma düzenindeki görüntüler gibidir. Yüzen öğeler, web sayfasının akışının bir parçası olarak kalır. Bu, mutlak konumlandırma kullanan sayfa öğelerinden belirgin şekilde farklıdır. Baskı düzenindeki metin kutusuna sayfa kaydırmayı göz ardı etmesi söylendiğinde olduğu gibi, kesinlikle konumlandırılmış sayfa öğeleri web sayfasının akışından kaldırılır . Kesinlikle konumlandırılmış sayfa öğeleri diğer öğelerin konumunu etkilemeyecek, diğer öğeler de birbirlerine dokunsalar da dokunmasalar da onları etkilemeyecektir.
Demo
Bu demo, iki resimli bir makale gösterir: biri to float: leftve diğeri to float: right. Kayan sayıları kapatıp açmak için "şamandıraları değiştir" düğmesine basın.
CodePen'de CSS-Tricks (@ css-tricks) tarafından hazırlanan Kalem Kayan Örneğine bakın.
Düzen için Yüzer
Görsellerin etrafına metin sarmanın basit örneğinin yanı sıra, tüm web düzenlerini oluşturmak için kayan öğeler kullanılabilir .
Kayanlar, daha küçük örneklerdeki düzen için de yararlıdır. Örneğin bir web sayfasının bu küçük alanını ele alalım. floatAvatar resmimiz için kullanırsak , bu resmin boyutu değiştiğinde kutudaki metin onu sığdırmak için yeniden akar:
Aynı düzen, kap üzerinde göreli konumlandırma ve avatar üzerinde de mutlak konumlandırma kullanılarak gerçekleştirilebilir. Ancak, bu şekilde yapıldığında, metin avatardan etkilenmez ve bir boyut değişikliğinde yeniden akıtamaz.
Demo
Bu demo, float: leftuygulanmış bir avatarı gösterir . Avatar resminin daha geniş bir versiyonunu görmek için "resim boyutunu değiştir" düğmesine basın. Metnin, görüntünün üzerinde koşmak yerine görüntüye uyacak şekilde yeniden aktığına dikkat edin.
CodePen'de CSS-Tricks (@ css-tricks) tarafından hazırlanan Pen Float Demosuna bakın.
Şamandırayı Temizleme
Float'ın kardeş mülkü clear. clearÜzerinde özelliğin ayarlandığı bir öğe , şamandıranın istediği gibi şamandıranın yanında yukarı hareket etmeyecek, ancak şamandıranın ötesine geçecektir. Yine bir örnek, kelimelerden daha yararlıdır:
Yukarıdaki örnekte, kenar çubuğu sağa kayar ve ana içerik alanından daha kısadır. Altbilginin daha sonra şamandıranın gerektirdiği o kullanılabilir alana atlaması gerekir. Bu sorunu gidermek için altbilgi, her iki kayan sütunun altında kalmasını sağlamak için temizlenebilir.
#footer ( clear: both; )Clear'in de dört geçerli değeri vardır. Değer bothen yaygın olarak kullanılır ve her iki yönden gelen şamandıraları temizler. Değerleri leftve rightsırasıyla sadece bir yönden şamandıra temizlemek için kullanılabilir. Başlangıç değeri, ayarlanmış nonebir cleardeğeri açıkça kaldırmak için kullanılmadığı sürece genellikle gereksizdir . Değer inherit, öğenin üst öğesinin değerini devralmasını sağlar clear. Garip bir şekilde, Internet Explorer bu değeri IE8'e kadar desteklemiyordu.
Vahşi doğada daha az yaygın olarak görülmesine rağmen, yalnızca leftveya rightyüzerliği temizlemek kesinlikle faydalarına sahiptir.
Büyük Çöküş
Şamandıralarla çalışmanın en şaşırtıcı şeylerinden biri, onları içeren öğeyi ("ana" öğeleri) nasıl etkileyebilecekleridir. Bir üst öğe yüzen öğelerden başka bir şey içermiyorsa, yüksekliği sıfıra daralır. Ebeveyn görsel olarak fark edilebilir bir arka plan içermiyorsa, bu her zaman açık değildir, ancak bunun farkında olmak önemlidir.
Çökme göründüğü kadar mantıksız görünse de, alternatif daha kötüdür. Şu senaryoyu düşünün:
Üstteki blok öğesi, kayan öğeyi barındırmak için otomatik olarak genişlemiş olsaydı, paragraflar arasındaki metin akışında, onu düzeltmenin pratik bir yolu olmadan doğal olmayan bir boşluk kırılırdık. Durum bu olsaydı, biz tasarımcılar bu davranıştan, çökme konusunda yaptığımızdan çok daha fazla şikayet ederdik.
Garip düzen ve tarayıcılar arası sorunları önlemek için neredeyse her zaman çökme ile ilgilenilmesi gerekir. Şamandırayı konteynırdaki yüzen elemanlardan sonra ancak konteynırın kapanmasından önce temizleyerek düzeltiriz .
Şamandıraları Temizleme Teknikleri
Bir sonraki öğenin ne olacağını her zaman bildiğiniz bir durumdaysanız, clear: both;değeri o öğeye uygulayabilir ve işinize devam edebilirsiniz . Bu, süslü kesmeler gerektirmediğinden ve onu mükemmel anlamsal kılan ek öğeler gerektirmediğinden idealdir. Elbette işler genellikle bu şekilde yürümez ve araç kutumuzda daha fazla kayan nokta temizleme aracına ihtiyacımız var.
- Boş Div Yöntemi , kelimenin tam anlamıyla boş bir div'dir.
- Taşma Yöntemi ,
overflowCSS özelliğinin bir üst öğe üzerinde ayarlanmasına dayanır . Bu özellik, üst öğeyeautoveyahiddenüst öğeye ayarlanırsa , üst öğe kayan öğeleri içerecek şekilde genişler ve onu sonraki öğeler için etkin bir şekilde temizler. Bu yöntem, ek unsurlar gerektirmeyebileceğinden güzel bir şekilde anlamsal olabilir. Ancak, kendinizidivsadece bunu uygulamak için bir yenisini eklerken bulursanız , boşdivyöntem kadar anlamsız ve daha az uyarlanabilirdir. Ayrıca, taşma özelliğinin özellikle yüzen değerleri temizlemek için olmadığını unutmayın. İçeriği gizlememeye veya istenmeyen kaydırma çubuklarını tetiklememeye dikkat edin. - Kolay Temizleme Yöntemi ("clearfix" olarak da bilinir), kayan sayıları temizlemek için akıllı bir CSS sözde seçici (
:after) kullanır. Üst üste taşmayı ayarlamak yerine, ona "clearfix" gibi ek bir sınıf uygularsınız. Ardından bu CSS'yi uygulayın:.clearfix:after ( content: ""; visibility: hidden; display: block; height: 0; clear: both; )Bu, kayan noktayı temizleyen ana öğeden sonra görünümden gizlenmiş küçük bir içerik parçası uygular. Eski tarayıcılar için ek kod kullanılması gerektiğinden, hikayenin tamamı bu değil. Not: Daha yeni "mikro düzeltme" de dahil olmak üzere, en son ve en büyük temiz düzeltmelerin kaydını tutan bu snippet'e de bakın.
Farklı senaryolar, farklı kayan nokta takas yöntemlerini gerektirir. Örneğin, her biri farklı tipte bloklardan oluşan bir ızgarayı ele alalım.
Benzer blokları görsel olarak daha iyi bağlamak için, bu durumda renk değiştiğinde istediğimiz gibi yeni bir satır başlatmak istiyoruz. Renk gruplarının her birinin bir ana öğesi varsa, taşma veya kolay temizleme yöntemini kullanabilirdik. Ya da her grup arasında boş div yöntemini kullanırız. Daha önce var olmayan üç sarmalayıcı div veya daha önce var olmayan divlerden sonra üç tane. Hangisinin daha iyi olduğuna karar vermenize izin vereceğim.
Şamandıralarla ilgili sorunlar
Şamandıralar genellikle kırılgan oldukları için yenilir. Bu kırılganlığın çoğu IE6 ve IE7'deki hatalardan kaynaklanıyordu. Bu tarayıcılar geçmişte kaybolurken, bu hatalar da onlarla birlikte kayboluyor. Ancak, bir “OldIE” de hata ayıklamanız gerekirse, yine de onları anlamaya değer.
- Aşağı itme , yüzen bir öğenin içindeki bir öğenin, kayan öğenin kendisinden daha geniş olmasının bir belirtisidir (tipik olarak bir görüntü). Çoğu tarayıcı, görüntüyü kayan nokta dışında oluşturur, ancak dışarı çıkan kısım diğer düzeni etkilemez. IE'nin eski sürümleri, kayan noktayı görüntüyü içerecek şekilde genişletti, bu da genellikle düzeni büyük ölçüde etkiledi. Yaygın bir örnek, ana içeriğin dışına çıkan bir görüntüdür ve kenar çubuğunu aşağıya doğru ittirin.
Hızlı çözüm: Bunu yapan herhangi bir görüntünüz olmadığından emin olun,
overflow: hidden;fazlalığı kesmek için kullanın . - Double Margin Bug - IE 6 ile uğraşırken hatırlanması gereken bir diğer şey de, float ile aynı yönde bir marj uygularsanız, marjı ikiye katlayacağıdır. Hızlı düzeltme:
display: inlineşamandırayı ayarlayın ve endişelenmeyin, blok düzeyinde bir öğe olarak kalacaktır. - 3px Jog sonraki bir yüzen elemanın kalmıştır metin esrarengiz şamandıra etrafında garip ForceField gibi 3px tarafından uzak sanıp ne zaman olacağı. Hızlı düzeltme: Etkilenen metinde bir genişlik veya yükseklik ayarlayın.
- IE 7'de, Bottom Margin Bug , kayan bir ebeveynin içinde çocukları gezdirmesi durumunda, bu çocukların alt kenar boşluğunun ebeveyn tarafından göz ardı edilmesiydi. Hızlı düzeltme: bunun yerine üst öğe üzerinde alt dolgu kullanmak.
Alternatifler
Görsellerin etrafına metin sarmanız gerekiyorsa, float için gerçekten herhangi bir alternatif yoktur. Metni düzensiz şekillerin etrafına sarmak için bu oldukça akıllıca tekniğe bakın. Ancak sayfa düzeni için kesinlikle seçenekler var. Eric Sol'un A List Apart, Sahte Mutlak Konumlandırma hakkında bir makalesi var; bu makale, birçok yönden şamandıraların esnekliğini mutlak konumlandırmanın gücüyle birleştiren çok ilginç bir tekniği açıklıyor.
CSS3, sayfa düzenini birkaç şekilde ele alır:
- Flexbox
- Çok Sütunlu Düzen
- Izgara Düzeni
Kesinlikle konumlandırılmış şamandıralar (örneğin, kesinlikle normal konumdasınız, ancak öğe hala diğer öğeleri etkileyebilir, örneğin etrafına metin sarması gibi) tartışıldı, ancak bence bu fikir, diğer daha sağlam yerleşim fikirlerine benzerliklerinden dolayı rafa kaldırıldı.
Video
Bir süre önce bu float kavramlarının çoğunu açıklayan bir ekran kaydı yaptım.
İlişkili
clearposition
Daha fazla bilgi
floatW3C spesifikasyonundafloatMDN'de
Tarayıcı Desteği
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Herşey | Herşey | Herşey | Herşey | Herşey | Herşey | Herşey |