Yüzen elemanlar kap elemanının yüksekliğine eklenmez ve bu nedenle bunları temizlemezseniz kap yüksekliği artmaz ...
Size görsel olarak göstereceğim:
Daha Fazla Açıklama:
<div>
<div style="float: left;"></div>
<div style="width: 15px;"></div> <!-- This will shift
besides the top div. Why? Because of the top div
is floated left, making the
rest of the space blank -->
<div style="clear: both;"></div>
<!-- Now in order to prevent the next div from floating beside the top ones,
we use `clear: both;`. This is like a wall, so now none of the div's
will be floated after this point. The container height will now also include the
height of these floated divs -->
<div></div>
</div>
overflow: hidden;Konteyner öğeleri de ekleyebilirsiniz , ancak clear: both;bunun yerine kullanmanızı öneririz .
Ayrıca, bir öğeyi kendiliğinden temizlemek isterseniz
.self_clear:after {
content: "";
clear: both;
display: table;
}
CSS Float Nasıl Çalışır?
Şamandıra tam olarak nedir ve ne işe yarar?
floatMülkiyet çoğu başlayanlar tarafından yanlış anlaşılır. Peki, tam olarak ne yapar float? Başlangıçta, floatözellik kayan leftya da görüntülerin etrafındaki metin akışına sokuldu right. @Madara Uchicha'nın başka bir açıklaması .
Peki, floatkutuları yan yana yerleştirmek için özelliği kullanmak yanlış mı? Cevap hayırdır ; floatkutuları yan yana ayarlamak için özelliği kullanırsanız sorun yoktur .
Bir inlineveya blockseviye elemanını yüzmek, elemanın eleman gibi davranmasını sağlar inline-block.
gösteriBir öğeyi yüzer ise leftveya right, widthelemanın sürece, içerik işlediğini ile sınırlı olacaktır widthaçıkça tanımlanır ...
floatBir element olamaz center. Bu, yeni başlayanlar ile her zaman gördüğüm en büyük sorun float: center;floatözellik için geçerli bir değer değil . floatGenellikle için kullanılır floatçok için / taşı içeriği sola ya da çok için sağa . Sadece vardır dört için geçerli değerler floatmülkiyet yani left, right, none(varsayılan) ve inherit.
Üst öğe, kayan alt öğeler içerdiğinde, bunu önlemek clear: both;için, her iki taraftaki kayan öğeleri temizlemek için özelliği kullanırız , bu da üst öğenin çökmesini önler. Daha fazla bilgi için, başka bir cevabımı buraya başvurabilirsiniz .
(Önemli) Çeşitli elemanlardan oluşan bir yığınımız olduğunu düşünün. Kullandığımızda float: left;veya float: right;öğe yığının üzerinde birer birer hareket ettiğinde . Bu nedenle, normal belge akışındaki öğeler yüzen öğelerin arkasına gizlenecektir, çünkü normal yüzen öğelerin üstündeki yığın seviyesindedir. (Lütfen bunu z-indextamamen farklı olduğu için ilişkilendirmeyin .)
Üstbilgi, altbilgi ve 2 sütun içeren basit bir 2 sütun düzenine ihtiyacımız olduğunu varsayarak, CSS'nin nasıl çalıştığını açıklamak için örnek olarak bir örnek almak, bu yüzden planın görünüşü şöyle ...
Yukarıdaki örnekte, biz sadece kırmızı kutuları yüzen olmak ya yapabilirsiniz olacak floathem leftveya mümkünse floatüzerine leftkadar ve başka rightbunun 3 sütun ise şunları yapabilirsiniz, düzen bağlıdır sıra floatiçin 2 sütun leftnerede başka biri rightbu duruma bağlıdır, ancak bu örnekte, basitleştirilmiş 2 sütun düzenine sahibiz, böylece floatbiri diğerine leftve diğerine right.
Düzeni oluşturmak için işaretleme ve stiller aşağıda açıklanmıştır ...
<div class="main_wrap">
<header>Header</header>
<div class="wrapper clear">
<div class="floated_left">
This<br />
is<br />
just<br />
a<br />
left<br />
floated<br />
column<br />
</div>
<div class="floated_right">
This<br />
is<br />
just<br />
a<br />
right<br />
floated<br />
column<br />
</div>
</div>
<footer>Footer</footer>
</div>
* {
-moz-box-sizing: border-box; /* Just for demo purpose */
-webkkit-box-sizing: border-box; /* Just for demo purpose */
box-sizing: border-box; /* Just for demo purpose */
margin: 0;
padding: 0;
}
.main_wrap {
margin: 20px;
border: 3px solid black;
width: 520px;
}
header, footer {
height: 50px;
border: 3px solid silver;
text-align: center;
line-height: 50px;
}
.wrapper {
border: 3px solid green;
}
.floated_left {
float: left;
width: 200px;
border: 3px solid red;
}
.floated_right {
float: right;
width: 300px;
border: 3px solid red;
}
.clear:after {
clear: both;
content: "";
display: table;
}
Düzenle adım adım gidelim ve şamandıranın nasıl çalıştığını görelim ..
Her şeyden önce, biz ana sarıcı eleman kullanmak, sadece o zaman kullandığımız, bu Görünümünüzün olduğunu varsayabiliriz headerve bir atama heightait 50pxhiçbir şey fantezi yani orada. Bu kadar sürer sadece normal olmayan süzülüyor blok düzeyinde eleman var 100%o süzülüyor sürece yatay alan ya da biz atamak inline-blockona.
İlk geçerli bir değer floatolduğunu leftbizim örneğimizde bu yüzden, kullandığımız float: left;için .floated_leftbiz bir blok yüzer niyetinde böylece, leftbizim muhafaza elemanının.
Sütun sola yüzer
Ve evet, görürseniz, .wrapperdaraltılmış olan üst öğe, yeşil bir kenarlıkla gördüğünüz genişlemedi, ancak doğru olmalı? Bir süre sonra buna geri dönecek, şimdilik, üzerinde yüzen bir sütun var left.
İkinci sütuna geliyor, bunu sağlayan floatbu birright
Sağa yüzen başka bir sütun
Burada, bir var 300pxbiz geniş sütun floatiçin righto kadar süzülüyor oluyor olarak ilk sütunda yanında oturacak, leftve o kadar süzülüyor beri left, bu kadar boş oluk oluşturulan rightve üzerinde alanı geniş olduğundan right, bizim rightyüzer eleman bir yanında mükemmel oturdu left.
Yine de, üst öğe çöktü, şimdi bunu düzeltelim. Üst öğenin daraltılmasını önlemenin birçok yolu vardır.
- Boş bir blok seviyesi öğesi ekleyin ve
clear: both;kayan öğeleri tutan üst öğe bitmeden önce kullanın , şimdi bu clearsizin için işi yapacak yüzen öğelerinize ucuz bir çözümdür, ancak bunu kullanmamanızı tavsiye ederim.
Ekleme <div style="clear: both;"></div>önce .wrapper divolduğu gibi, uçları
<div class="wrapper clear">
<!-- Floated columns -->
<div style="clear: both;"></div>
</div>
gösteri
Eh, bu çok iyi bir şekilde düzeldi, artık çökmüş bir overflow: hidden;üst öğe yok, ancak DOM'a gereksiz işaretleme ekliyor, bu nedenle bazıları, amaçlandığı gibi çalışan kayan alt öğeleri tutan üst öğe üzerinde kullanılmasını önermektedir .
Kullanım overflow: hidden;ile ilgili.wrapper
.wrapper {
border: 3px solid green;
overflow: hidden;
}
gösteri
Bu bize her ihtiyaç duyduğumuzda bir öğe kazandırır, clear floatancak bununla çeşitli vakaları test ettiğim box-shadowiçin, alt öğeler üzerinde kullanılan belirli bir birinde başarısız oldu .
Demo (Gölgeyi 4 tarafta da göremiyorum,overflow: hidden;bu soruna neden oluyor)
Peki şimdi ne olacak? Bir öğeyi kaydedin, overflow: hidden;açık bir düzeltme kesmek için gitmeyin, CSS'nizde aşağıdaki snippet'i kullanın ve tıpkı overflow: hidden;üst öğe için kullandığınız gibi , classkendi kendini temizlemek için üst öğede aşağıdakileri arayın .
.clear:after {
clear: both;
content: "";
display: table;
}
<div class="wrapper clear">
<!-- Floated Elements -->
</div>
gösteri
Burada gölge amaçlandığı gibi çalışır, ayrıca çökmeyi önleyen ana öğeyi kendiliğinden temizler.
Ve son olarak, clearkayan elemanlardan sonra altbilgiyi kullanıyoruz .
gösteri
float: none;Zaten ne zaman kullanılır, varsayılan olduğu gibi, bildirmek için herhangi bir kullanım float: none;?
Duyarlı bir tasarıma gidiyorsanız, kayan öğelerinizin belirli bir çözünürlükte birbirinin altında olmasını istediğinizde, bu değeri birçok kez kullanacaksınız. Çünkü bu float: none;mülk burada önemli bir rol oynamaktadır.
Nasıl floatfaydalı olduğuna dair birkaç gerçek dünya örneği .
- Daha önce gördüğümüz ilk örnek, bir veya daha fazla sütun düzeni oluşturmaktır.
- Kullanılması
imgsüzülüyor içini petrafında akmaya içeriğimizi sağlayacaktır.
Demo (Kayanimg)
Demo 2 (imgyüzerleft)
floatYatay menü oluşturmak için kullanma - Demo
İkinci öğeyi de yüzdürün veya "kenar boşluğu" kullanın
Son fakat en az değil, floatsadece tek bir öğeye sahip olduğunuz leftancak floatdiğerini yapmadığınız bu özel durumu açıklamak istiyorum , ne olacak?
Biz kaldırırsanız varsayalım float: right;kızımız gelen .floated_right class, divaşırı gelen işlenecek lefto süzülüyor çekmemektedir.
gösteri
Yani bu durumda, ya olabildiğince floatiçin leftde
VEYA
Sen edebilirsiniz kullanmak margin-leftyani süzülüyor sol sütunda büyüklüğüne eşit olacak 200pxgeniş .