CSS Float: açıklaması, özellikleri

Float - dilin temel işlevlerden birini CSS (Cascading Style Sheets edilir - biçimlendirme basamaklı). Bu dil 1996 yılından bu yana var olan ve hala gelişmeye devam ediyor. Şu anda, geliştiriciler CSS üçüncü versiyonunu kullandık. CSS programlama dili sayesinde JavaScript kullanmadıysanız bile, kullanıcı için eski veya rahatsız görünmez güzel ve hoş bir site oluşturmak mümkündür. izni üçüncü versiyonunun Modern olanaklar.

Ayrıca, geliştiriciler bu tür ilk flexbox'a veya sitede alan elemanını değiştirmek için Konum gibi daha uygun biçimlendirme seçeneklerini, ancak ilk şeyler kullanabilirsiniz. avantajlar ve dezavantajlar özelliklerini Float anlamaya başlamak için.

CSS Float - neden gereklidir?

Float - özelliğine sahip pozisyonlama elemanları ile. Hergün, resim ve çok özenle etrafında onları saran metin, bakarak, gazete ve dergilerin sayfalarında görülebilir. и CSS при использовании функции Float должно произойти то же самое. Aynı gerçekleşmesi gerektiğini Float işlevini kullanarak HTML ve CSS kod dünyasında. Ama resim düzenleme her zaman bu işlevin ana amacı olmadığını hatırlamak önemlidir. İki, üç, dört sütun sitenin unsurlarının popüler yerini oluşturmak için kullanılabilir. Aslında, Float CSS özelliği hemen her html-eleman için kullanılır. Sitenin herhangi bir tasarım oluşturmak için, o Mülkiyet Float işlevini kullanarak düzen öğelerini düzenleme ve temellerini bilmek zor olmayacaktır.

Özel DTP programları bazen görüntüleri göz ardı edebilirsiniz ve bunların üzerine gitmek. Yeter benzer şeyler olur ve (özelliklerini Float yanlış kullanılırsa) resme yalnızca metin ışığında yerine tırmanış ile web tasarımı, görüntülenen yanında veya altında, her zaman olmasa da bir geliştirici gereken yere.

mülkiyetin CSS Float açıklaması

Aslında, Float özelliğini kullanma yeteneği herhangi bir web tasarımcısı deliğe çok iyi bir ası. Ama ne yazık ki bu nasıl işlediğini anlayış eksikliği çarpışmaları ve bu tür site acıların diğer elementlerin neden olabilir. Daha önce de bu tür durumlar nedeniyle tarayıcılarda hataların meydana gelir. Şimdi düzgün Float özelliği nasıl kullanılacağına ilişkin gizli açılacak ve onunla hiçbir sorun büyük olmamalıdır.

Biz özellik dört değerlere sahiptir Float:

• Float: miras;
• Float: right;
• Float: sol;
• Float: none;

İngilizce bilenler için, parametre değerleri mülkiyet net olmalıdır Float. Ama bilmiyorum olanlar için, biraz açıklama getirebilir. Parametre: sol; Bu ana elemanın en aşırı sol köşesinde eleman gövdesini hareket ettirir. Aynı şey (sadece başka bir şekilde) gerçekleştiğinde bcgjkmpjdfybb parametre: right; . Değer: miras; ebeveyn ile aynı yapıya geri elemanı emreder. onlar ana html-kod içinde doğrudan yer almaktadır olarak bu tür elemanlar, hala çocuk denir. Bir özellik: none; Bu eleman kodunun tüm parçaları için varsayılan olarak ayarlanır belgenin, olağan akışını bozmaması için izin verir.

Nasıl işleyecek Float için?

Float CSS özelliği oldukça basit çalışır. Yukarıda açıklanan edildiğini Tümü, fazla zorlanmadan yapılabilir. Bundan sonra, her şey sadece kadar kolay olacaktır. Ama Float özelliklerini inceleyerek devam etmeden önce, teori içine biraz göz değer. Her web sitesi bloğunun bir elementtir. Ctrl + Shift + J metin, başlık, resim bağlantılarıyla Google Chrome'da konsolu açarak görmek kolaydır ve sitenin tüm diğer bileşenler blokları, sadece farklı boyutlarda görüntülenecektir. Başlangıçta, tüm bu bloklar birbirlerine takip ediyor. Aşağıdaki örnekte gösterildiği gibi, kod dizesi birbiri ardına gidin ve bu yüzden kesinlikle birbiri ardına görünmektedir.

Bu normal akış (normal akış) olarak adlandırılır. Tüm bu blokları dikey elemanlar (geçiş olmadan gövde), birbirlerine içinde olduğu zaman. Başlangıçta, bu sayede bulunduğu web sayfalarının tüm içeriği. kullanırken Ancak, örneğin, CSS özellikleri Sol dil elemanı Soldaki sayfada ve hamle üzerindeki doğal pozisyonunu terk Float. Bu davranış, normal seyrinde kalanlara unsurlarla kaçınılmaz çarpışma yol açar.

Diğer bir deyişle, elemanlar yerine dikey olarak konumlandırılmış, hemen birbirine bitişiktir. içeride iki çocuk için uygun olduğunu, böylece ana öğe yeterince yer ise, çarpışma oluşmaz, ancak eğer, başka bir nesnenin dayatma kaçınılmazdır. Float CSS özelliklerinin anlaşılması için hatırlamak son derece önemlidir.

sorunları çözmek için Temizle işlevi

Temizle - Biz bir kalp her sahiptir Float. Birlikte - su dökmeyin. Bu özelliklerin her ikisi birbirini tamamlar ve geliştirici mutlu. Yukarıda belirtildiği gibi, komşu hücreler normal tabii çıkıp da Float özelliği kullanıldı üzere eleman (örneğin, CSS Float Üst) olarak "şamandıra" başlarlar. Sonuç olarak, yerine kayan elemanın onlar geliştirici düzenlemek için tasarlanmış çok İKİLEŞİR değil. O andan itibaren sadece tüm sorunları başlıyor.

Temizle anda işlev beş değer vardır:

• : Sol;
• : Sağ;
• : Hem;
• : Kalıt;
• none;

o Temizle işlevini kullanmak en iyisidir zaman Kıyasla biz anlayabiliriz. biz kod ile Yüzer bir çizgi yazılı varsa: right; Fonksiyon Temizle olmalıdır (CSS-kod kastedilmektedir): sağ ;. kayalar ve aynı özellikleri Float: left; o Temizle tamamlayacak: sol; . Temizle kod yazarken: Her iki; bu elemanı, uygulandığı çıkıyor, bu özellik Float fonksiyonu uygulanan elemanlarının altında olacaktır. Devral üst öğesinden ayarları alır, ama hiçbiri sitenin yapısına herhangi bir değişiklik yapmaz. и CSS Float-код, который сделает ваш веб-сайт единственным в своем роде. Eğer Float ve Clear fonksiyonlar, sen türünün web sitenizin benzersiz yapacak eşsiz ve sıradışı HTML ve CSS Float-kod yazabilirsiniz konumunu bilir.

Float kullanma sütunlar oluşturmak için

sitede (veya web sayfasının ortasına CSS Float İçeriğin konumu) üzerine sütunları oluştururken özellikle yararlı özelliği Float. Bu kod en pratik ve kullanışlı olan, yani iki sütun oluşan olağan bir site şablonu oluşturmak için çeşitli seçenekler göz önünde bulundurmalıdır. Örneğin, sağ, üstbilgi ve altbilgi için sol gezinti çubuğu (gezinme çubuğunda) üzerinde içeriğe sahip standart bir web sitesi almak. Kod şöyle görünür:

Şimdi biz burada yazılanları anlamak gerekir. HTML kodu ana bölümü bir kap (konteyner) olarak adlandırılır ki burada ana öğe. Bu farklı yönlere dağılmaya Float fonksiyonunu uygulandığı elemanları, önlemek için izin verir. o değildi, o zaman bu unsurlar tarayıcının sınırları kadar süzülüyor var.

Ardından, ve kodda #content #navigation gidin. Bu elemanlar Float fonksiyonu kullanılır. sola ve sağa gönderilen #content #navigation olduğunu. İki sütunlu bir site oluşturmak için gereklidir. nesneler birbiriyle çakışır kalmamanız, genişliğini belirtmek için emin olun. Sen genişliği ve yüzdesini belirtebilirsiniz. Yani daha da rahat piksel daha. Örneğin,% 45 ve #navigation için #content ve geri kalan% 10,% 45 özelliği marjı elde edildi.

#footer içindedir Temizle, Mülkiyeti altbilgi #navigation ve #content izleyin, ama öyleydi aynı yere bırakır etmez. Ne olabilirki Eğer Temizle özelliğini belirtmezseniz? Bu kod #footer basitçe gidip #navigation altında olacak. Bunun nedeni #navigation yeterli alan birden fazla öğeyi kapsayacak şekilde gerçeğine olur. Bu açıklayıcı örnekte, Clear özellikleri Float ve birbirlerini tamamlayıcı kadar net bir şekilde görülebilir.

kod yazarken Sorunlar karşılaşabileceğiniz

Yukarıdaki örnekler basittir. Ama onlarla sorunlara neden olabilir. Genellikle, aslında, beklenmedik bir sürü sorun fonksiyonunu Float başına gelebilir. Ne kadar garip, ama sorunlar genellikle CSS ile meydana gelmez ve html-kodu. html-kodu Float fonksiyonu ile eleman direkt olarak nihai çalışmasını etkiler konumu. konumlandırma elemanları birinci kodun işlevini Float - zorluklar çeşitli önlemek için, basit kurallara uymak en iyisidir. Hemen hemen her zaman çalışır ve onların beklenmeyen davranışlar minimize etmek.

elementlerin Çatışma

üst öğe hepsini barındıramaz birden çocuğu içerdiğinde Çarpışma meydana gelir ve bunlar birbiriyle çakışır. Hatta öğeler görüntülenir ve siteden kaldırılması olmayabilir olur. Bu bir hata tarayıcı değildir ve bunun beklenen ve Float fonksiyonu ile elemanların doğru davranış olduğunu.

Nedeniyle bu unsurlar, normal seyrinde başlangıçta, ve o zaman bozuldu Float özelliği tarayıcı sitesinden kaldırabilirsiniz gerçeğine. çözüm basit ve net olduğu için, üzmeyin - Cear özelliğini kullanın. Sorunun dışında yollardan bütün bu, Temizle kullanımının en etkili olduğu mümkündür.

Ama web sayfası öğelerinin çarpışma sorunu başka bir şekilde çözülebilir. En az iki yolu vardır:

• fonksiyonunun kullanımını yerleştirin;
• Uygulama flexbox'a.

Pozisyon fonksiyonu genellikle CSS Float için iyi bir alternatiftir. Uygulama Pozisyon durumunda web sayfasının ortasında imajını yerleştirmek en iyisidir. mutlak ve: Düzgün uygulanan değerler ise göreli, elementler yere düşecek ve birbirlerini örtüşmez.

Pozisyon Analizi ve Float fonksiyon kodu

и CSS Float заменить на Position. Bu Pozisyon yerine HTML şekilde ve CSS Float ile daha uğraşmak gerekir. Aslında çok basit. en unsuru #container ve #div olduğunu varsayalım.

#container {

en: 40%;

yüzer: sol;

marjı: 10px;

}

#div {

en: 40%;

yüzer: hakkı;

marjı: 10px;

}

#footer {

açık: Her iki;

}

Bu örnekte, ikinci kapta fonksiyonların kullanımı (CSS Div) Float iki sütun standart bir site oluşturmak için yardımcı olacaktır. Temizle işlevini asla unutmayın. Olmadan sadece birbirinin üstüne unsurları üzerinde görünecektir.

Peki CSS değiştirmek ve konumunuzu kullanmak için kod Float mı? Çok basit:

#container {

en: 40%;

konum: göreceli;

marjı: 10px;

}

#div {

en: 40%;

konum: göreceli;

marjı: 10px;

}

ve bu durumda #container #div olarak ana öğesi geliştiricisi gerekli pozisyon almak. Önemli olan? #div koymak ve büyüklüklerine uygun olacak bir üst öğe, #container.

Flexbox'a - CSS Float yerini alacak bu fonksiyon?

Flexbox'a - Şu anda web siteleri oluşturmak için en gelişmiş yolu, bu nedenle bu fonksiyon tarayıcılarının eski sürümleri tarafından desteklenmez. Bu gerçek tarayıcılarının eski sürümleri ile kullanıcılar için, indirimli edilemez sitenizin doğru sürümünü görmek mümkün olmayacaktır.

Flexbox'a ayrı bir modül olarak bir özellik değildir. Bu nedenle FlexBox sadece onunla çalışmak özellikleri, bir dizi destekler. Ayrıca, satır içi üç parametre vardır ekran fonksiyonu, flexbox'a blok ve inline-block tek esnek-akışı vardır.

Nasıl flexbox'a yapar?

Bu teknoloji kolayca yatay ve dikey elemanları hizalamak için geliştirici yardımcı olur. FlexBox yön ve gösterge elemanlarının sırası değişebilir. Ana eksen ve Çapraz eksen, bütün flexbox'a inşa etrafında: Bu teknolojide, iki eksen vardır. Aynı zamanda etki Float ve Clear işlevlerini kaldırır. O maalesef hücrelerde çoğaltmak mümkün olmayacaktır, onun mülküne benzersiz kullanan kodlarla, onun sistemini oluşturur ve bu nedenle bu tür Float ve Konum gibi diğer özellikler. Yukarıda da belirtildiği gibi, flexbox'a sadece tarayıcıların yeni sürümlerinde çalışacak, çünkü o, çok kullanışlı olacaktır.

Bu son Pozisyon, flexbox'a ile Yüzer olduğunu hatırlamakta ve aynı şeyi değer - Sitenizin sıradışı ve özgün tasarım oluşturmak. makalede açıklanan her sürümü dolayısıyla avantajları ve dezavantajları vardır, kendi yöntemiyle yapıyor ve. Buna ek olarak, bir yere mükemmel Float fonksiyonu (örneğin, basit bir yapıyla yerinde), ama bir yerde daha iyi Konumu veya flexbox'a kullanmak olur.

Çift Marj Bug

Ancak, bazen, ne yazık ki, her geliştirici problemler böcek ve bazı tarayıcı özgü biçimde, yazılı koddan değil ortaya çıkar. Örneğin, Internet Explorer, Çift Marj Bug çağrılan bir hata vardır. O tarayıcı sınırın sitenin elemanlarının yerlerinden edilmesiyle sonuçlanan ikiye Marjı parametresini çarpar. Bunu önlemek için, parametre Marjı Yüzde göstermek için yeterlidir. Genellikle bu hata oluşur, y ve özellikleri Kenar şamandıra noktası değeri.

#div {

yüzer: sol;

kenar sol: 10px;

}

Bu kod, Internet Explorer 20 px sol eleman kayacak. aşağıdaki gibi kod değiştirebilirsiniz:

#div {

yüzer: sol;

kenar-: 10%;

}

falan

#div {

yüzer: sol;

margin-right: 10px;

}

Bu seçeneklerin ikisi de deplasman elemanlarının sorunu çözecektir.

Hatalar tarayıcı ve yanlış gösterge sitesi

böcek oluşabilir tek tarayıcı değil - Internet Explorer hatırlamak değer. Google Chrome ve Mozilla eski sürümleri de yanlış modern web sitesine bazı öğeleri görüntülemek. Bu düzeltmeler her biri için, bir çözüm bulabilirsiniz. Genel olarak, Float kullanımı özgün ve çekici web sitesi tasarımı yaratmak unutmayın. Bu özellik temellerini ve ilkelerini anlama hatalardan kaçınmak ve herhangi bir geliştirici hayatını kolaylaştıracak yardımcı olacaktır.