CSS 5 Soruda Açıklanıyor

CSS "Floats" (yüzen elemanlar) kullanımı basittir ancak bir kez kullanıldığında, etrafındaki elemanlar üzerindeki etkisi bazen tahmin edilemez hale gelir. Eğer yakındaki elementleri yok etme veya ağrılı bir parmak gibi fırlayan yüzmelerde kaybolma problemleriyle karşılaştıysanız, artık endişelenmeyin.

Bu gönderi, yüzen öğeler konusunda uzman olmanıza yardımcı olacak beş temel soruyu kapsar.

1. Hangi elementler yüzmüyor?
2. Yüzerken bir elemana ne olur??
3. "Yüzen" kardeşlerine ne olur??
4. Bir "Float" ebeveyne ne olur?
5. "Yüzenleri" nasıl temizlersiniz?

TL'yi ekleyen okuyucular için, dr'in hayata yaklaşımı, yazının sonuna yakın bir özeti var..

1. Hangi elementler yüzmüyor?

bir kesin veya sabit konumlu eleman yüzmeyecek. Böylece bir dahaki sefer çalışmayan bir şamandırala karşılaştığınızda, içeride olup olmadığını kontrol edin. konumu: mutlak veya pozisyon: Sabit ve buna göre değişiklikler uygulayın.

2. Yüzerken bir elemana ne olur??

Bir eleman "şamandıra" olarak etiketlendiğinde, temelde sola veya sağa doğru hareket eder. konteyner elemanının duvarına çarptı. Alternatif olarak, o kadar çalışacak zaten aynı duvara isabet etmiş bir başka kayan elemana çarptı. Alan tükenene kadar yan yana yığmaya devam edecekler ve yeni gelenler aşağı taşınacak.

Ayrıca yüzen elemanlar elementlerin üstüne gitmeyecek önce o Kodda, kodlamadan önce dikkate almanız gereken bir şey “şamandıra” sonra yüzdürmek istediğiniz tarafına bir eleman.

Aşağıda, ne tür bir öğenin kayan tutulduğuna bağlı olarak kayan bir öğenin başına gelen iki şey daha vardır:

(1) Satır içi bir öğe blok düzeyinde bir öğeye dönüşecek yüzdüğünde.

Neden birdenbire yüzer yüzeye yükseklik ve genişlik atayabildiğinizi merak ettiniz. karış? Çünkü yüzdürüldüğünde tüm elemanlar değeri alacak blok onun için Görüntüle özellik (içi masa alacak tablo(onları seviye elemanları engelleme).

(2) Belirlenmemiş genişlikte bir blok elemanı, yüzerken içeriğine sığacak şekilde küçülecek.

Genellikle, bir blok elemanına genişlik belirtmediğinizde, genişliği varsayılan% 100'dür. Ancak yüzdüğü zaman, durum böyle değil; blok elemanın kutusu içeriği görünür durumda kalana kadar büzülür.

3. "Yüzen" Kardeşlerine ne olur??

Bir elementin arasında bir elementi yüzmeye karar verdiğinizde, nasıl davranacağına dair endişelenmeyin, davranışı tahmin edilebilir olacak ve sola veya sağa hareket edecektir. Gerçekten düşünmen gereken şey kardeşler ondan sonra nasıl davranacak.

"Şamandıralar", tüm dünyada daha sonra bakmakta ve itaatkar kardeşlere sahiptir. Yüzen bir elemanı barındırmak için ellerinden geleni yapacaklar..

metin ve satır içi öğeler sadece olacak "Yüzen" için yol yapmak ve "Yüzen" çevreleyen pozisyondayken.

blok elemanları bir adım daha ileri gidecek ve kendilerini bir "Float" etrafına sar cömertçe, "Şamandıra" için yer açmak için kendi çocuk unsurlarını atmak anlamına gelse bile.

Bunu bir deneyde kontrol edelim. Aşağıda mavi bir kutu vardır ve sonrasında bazı alt öğelerle aynı boyutta bir kırmızı kutu bulunur..

Şimdi mavi kutuyu yüzelim ve kırmızı kutuya ve çocuklarına ne olduğunu görelim..

Kırmızı kutu mavi kutuyu kucaklamayı bıraktığında ve bunun için her şey yoluna girecek. taşma: gizli.

Ne zaman eklersin taşma: gizli bir şamandırayı saran bir elemana göre. Kırmızı kutunun nasıl çalıştığını aşağıya bakın taşma: gizli.

4. Bir "Float" ebeveyne ne olur?

Ebeveynler “Float” çocukları hakkında çok fazla umursamıyorlar, ancak sol veya sağ sınırlarından çıkmamaları dışında.

Tipik olarak belirtilmemiş bir yüksekliğe sahip bir blok eleman, alt elemanlarını yerleştirmek için yüksekliğini arttırır, ancak bu "yüzdürme" çocukları için geçerli değildir.. Bir "Şamandıra" boyutu artarsa, ebeveyni buna göre yüksekliğini arttırmaz.. Bu tekrar kullanarak çözülebilir taşma: gizli ebeveynde.

5. "Yüzen" nasıl temizlenir?

Ben zaten kullanarak bahsettim taşma: gizli "Yüzer" den sonra diğer elemanlar için doğru alanı oluştururken, bir yüzen çocuğu uzağa yerleştirmek ve kardeşlerin "Yüzenleri" sarmasını engellemek için.

Ve bir elementi ödün vermeyen bir “Float” yakınında yaşatıyorsun..

Elementlerin "Float" kardeşlerine yakın hiçbir yerde olmayacakları başka bir yöntem var. Kullanarak açık bir öğeyi "Float" yakınında olmamak için serbest bırakabilirsiniz..

temizle: sola; temizle: doğru; ikisini de temizle; 

ayrıldı değer, öğenin solundaki tüm "Floats" öğelerini siler ve sağ, ve her iki tarafta da her ikisi de. Bu açık Öznitelik uygun, bir kardeş, boş div veya sözde eleman üzerinde kullanılabilir.

özet

1. Mutlak / Sabit öğeler yüzmüyor.
2. Bir "Float" elementin üstüne gitmez önce kodunda.
3. Kabın içinde yeterince yer yoksa, bir "Şamandıra" aşağı doğru itilir.
4. Tüm "Şamandıralar" blok seviyeli elemanlar haline getirilir.
5. Bir "Kayan" üzerinde genişlik belirtilmemişse, içeriğe sığması için küçültülür.
6. Daha sonra bir "Float" kardeşleri onları çevreleyecek (satır içi ve metin) ya da saracak (bloklar).
7. Bir öğenin "Float" sarmasını durdurmak için, taşma: gizli.
8. Bir "Şamandıra" nın ebeveynleri şamandıraya sığacak şekilde yüksekliğini arttırmaz.
9. Bir ebeveyni "Şamandıra" ye göre yüksekliğini artırmak için, taşma: gizli (veya ile boş bir kardeş oluşturun açık ondan sonra)
10. Bir elemanın herhangi bir "Şamandıra" yakınında olmasını önlemek için açık nitelik.