Aşağıdaki CSS kuralı ne işe yarar:

.clear { clear: both; }

Ve neden kullanmamız gerekiyor?

Bu soru şamandıraların burada nasıl çalıştığını (ayrıntılı olarak) açıklamayacağım, çünkü bu soru genellikle neden kullanıyoruz clear: both;VEYA clear: both;tam olarak ne işe yarar ...

Bu cevabı basit ve noktaya saklayacağım ve size niçin clear: both;gerekli olduğunu veya ne yaptığını grafik olarak açıklayacağım ...

Genellikle tasarımcılar elemanları sağa veya sola kaydırır, bu da diğer tarafta boş alan yaratır ve bu da diğer elemanların kalan alanı kaplamasını sağlar.

Neden elementleri yüzüyorlar?

Tasarımcının yan yana 2 blok seviyeli elemanlara ihtiyacı olduğunda elemanlar yüzer. Örneğin, aşağıdaki gibi bir düzene sahip temel bir web sitesi tasarlamak istediğimizi varsayalım ...

Demo görüntüsünün canlı örneği .

Demo Kodu

/*  CSS:  */

* { /* Not related to floats / clear both, used it for demo purpose only */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

header, footer {
    border: 5px solid #000;
    height: 100px;
}

aside {
    float: left;
    width: 30%;
    border: 5px solid #000;
    height: 300px;
}

section {
    float: left;
    width: 70%;
    border: 5px solid #000;
    height: 300px;
}

.clear {
    clear: both;
}

<!-- HTML -->
<header>
    Header
</header>
<aside>
    Aside (Floated Left)
</aside>
<section>
    Content (Floated Left, Can Be Floated To Right As Well)
</section>
<!-- Clearing Floating Elements-->
<div class="clear"></div>
<footer>
    Footer
</footer>

Not: ekleyebilir gerekebilir header, footer, aside, section(ve diğer HTML5 öğeleri) olarakdisplay: block; açıkça elemanları blok seviyesi unsurlardır söz için stil.

Açıklama:

Temel bir düzen, 1 üstbilgi, 1 kenar çubuğu, 1 içerik alanı ve 1 altbilgim var.

Şamandıra yok header, daha sonra asideweb sitem kenar çubuğu için kullanacağım etiket geliyor , bu yüzden öğeyi sola kayarım.

Not: Varsayılan olarak, blok düzeyi öğesi belgeyi% 100 genişlik alır, ancak sola veya sağa kaydırıldığında, içerdiği içeriğe göre yeniden boyutlandırılır.

1. Blok Seviye Elemanın Normal Davranışı
2. Blok Seviye Elemanının Dalgalı Davranışı

Not ettiğiniz gibi, sol yüzen divalan boşluğu kullanılmamış olarak bırakır, bu da divsonradan kalan alanda kaymasına izin verir .

1. divyüzer DEĞİLSE birbiri ardına render
2. div sola veya sağa kayarsa yan yana kayar

Tamam, öyleyse blok seviyesi elemanları sola veya sağa doğru yüzerken böyle davranır, şimdi neden clear: both;gerekli ve neden?

Yani düzen demosunda not ederseniz - unutmanız durumunda, işte ..

Ben denilen bir sınıf kullanıyorum .clearve cleardeğeri ile denilen bir özellik tutar both. Öyleyse neden ihtiyacı olduğunu görelim both.

Ben yüzen asideve sectionsola elemanları, bu yüzden bir havuz var, burada headerkatı arazi, asideve sectionhavuzda yüzen ve altbilgi tekrar katı arazi, böyle bir şey var ..

Yani mavi suyun yüzen elemanların alanının ne olduğu hakkında hiçbir fikri yok, havuzdan daha büyük veya daha küçük olabilirler, bu yüzden burada CSS yeni başlayanların% 90'ını rahatsız eden ortak bir sorun geliyor: neden bir konteyner elemanının arka planı gerilmedi yüzen elemanları tutarken. Konteyner elemanının burada bir HAVUZ olması ve HAVUZ'un kaç nesnenin yüzdüğünü veya yüzen öğelerin uzunluğunun veya genişliğinin ne olduğunu bilmediği için, gerilmeyecektir.

1. Dokümanın Normal Akışı
2. Sola Kayan Bölümler
3. Kabın Arka Plan Rengini Uzatmak İçin Yüzen Öğeler Temizlendi

( Bunu yapmak için düzgün bir yol için bu cevabın ^[Clearfix] bölümüne bakın . divAçıklama amacıyla bilerek boş bir örnek kullanıyorum )

Yukarıda 3 örnek verdim, 1'inci, redkapta yüzen nesneler olmadığı için arka planın beklendiği gibi oluşturulacağı normal belge akışıdır .

İkinci örnekte, nesne sola kayarken, konteyner elemanı (POOL) kayan elemanların boyutlarını bilemez ve bu nedenle kayan elemanların yüksekliğine uzanmaz.

Kullandıktan sonra clear: both;kap elemanı, yüzer eleman boyutlarına gerilecektir.

Başka bir neden clear: both; kullanılmasının bir elemanın kalan boşlukta yukarı kaymasını önlemektir.

Diyelim ki 2 eleman yan yana ve altlarında başka bir eleman ... Yani 2 elemanı sola yüzdüreceksin ve alt kısımlarını da altta istiyorsun.

1. divsectionKalan sola doğru kayar ve kalan boşluğa geçer
2. Süzülüyor divböylece temizlenmiş sectionetiketi süzülüyor aşağıda verecek divs

1. Örnek

2. Örnek

Son fakat en az değil, footeretiket, kayan öğelerden sonra , etiketlerimi clearbildirmeden önce sınıfı kullandığım için oluşturulacak footer, bu da tüm kayan öğelerin (sol / sağ) o noktaya kadar temizlenmesini sağlar.

Clearfix

Şamandıralarla ilgili düzeltmeye geliyor. @Elky tarafından daha önce belirtildiği gibi , bu şamandıraları temizleme şeklimiz bunu yapmanın temiz bir yolu divdeğildir, çünküdiv eleman . İşte burada düzeltme geliyor.

Üst öğeniz bitmeden sizin için boş bir öğe oluşturacak bir sanal öğe olarak düşünün. Bu, yüzen elemanları tutan sarma elemanınızı kendiliğinden temizleyecektir. Bu öğe DOM'nizde tam anlamıyla mevcut olmayacak, ancak işi yapacak.

Yüzen elemanlara sahip herhangi bir sargı elemanını kendi kendini temizlemek için kullanabiliriz

.wrapper_having_floated_elements:after {  /* Imaginary class name */
  content: "";
  clear: both;
  display: table;
}

Bunun :afteriçin benim tarafımdan kullanılan sahte öğeye dikkat edin class. Bu, sarma öğesi için kendisini kapatmadan hemen önce sanal bir öğe oluşturur. Dom'a bakarsak, Belge ağacında nasıl göründüğünü görebilirsiniz.

Görüyorsanız, yüzen çocuktan sonra, bunun diviçin de kullandığımız özelliğe sahip boş bir divelemana eşdeğer olmayan şamandıraları temizlediğimiz yerde render clear: both;edilir. Şimdi neden display: table;ve contentbu cevapların kapsamı dışındadır, ancak sözde öğe hakkında daha fazla bilgi edinebilirsiniz .

IE8 :aftersözde desteği desteklediğinden, bunun IE8'de de çalışacağını unutmayın .

Orijinal Yanıt:

Geliştiricilerin çoğu, içeriklerini sayfalarında sola veya sağa yüzer, muhtemelen logo, kenar çubuğu, içerik vb. Kalan alanda da yüzer, bu yüzden clear: both;kullanılmasını önlemek için sola veya sağa yüzen tüm elemanları temizler.

gösteri:

------------------ ----------------------------------
div1(Floated Left) Other div takes up the space here
------------------ ----------------------------------

Şimdi div1, aşağıdaki diğer div clear: both;işlemesini yapmak istiyorsanız , böylece tüm şamandıraları sola veya sağa temizlemenizi sağlayacak şekilde kullanırsınız.

------------------
div1(Floated Left)
------------------
<div style="clear: both;"><!--This <div> acts as a separator--></div>
----------------------------------
Other div renders here now
----------------------------------

clearÖzelliği, bir elemanın sağdan sola, ya da her iki tarafında aynı blok biçimlendirme kapsamında daha önce yüzen elemanlara bitişik olamaz gösterir. Temizlenen elemanlar karşılık gelen yüzen elemanların altına itilir. Örnekler:

clear: none; Eleman yüzen elemanlara bitişik kalır

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-none {
  clear: none;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-none">clear: none;</div>

clear: left; Sol yüzen elemanların altına itilen eleman

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.clear-left {
  clear: left;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-left">clear: left;</div>

clear: right; Sağ kayan elemanların altına itilen eleman

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-right {
  clear: right;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-right">clear: right;</div>

clear: both; Yüzen tüm elemanların altına itilen eleman

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-both {
  clear: both;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-both">clear: both;</div>

clear geçerli blok biçimlendirme bağlamının dışındaki kaydırmaları etkilemez

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.inline-block {
  display: inline-block;
  background: #BDF;
}
.inline-block .float-left {
  height: 60px;
}
.clear-both {
  clear: both;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="inline-block">
  <div>display: inline-block;</div>
  <div class="float-left">float: left;</div>
  <div class="clear-both">clear: both;</div>
</div>

CSS float ve net

Örnek Keman

Sadece ile clear:bothözelliğini kaldırmaya çalışın ve nasıl yüzdüğünü izleyin .divclass sampledivs

Bay Alien'in cevabı mükemmel, ama yine de kullanmanızı tavsiye etmiyorum <div class="clear"></div>çünkü sadece işaretlemenizi kirleten bir hack. Bu, divkötü yapı ve anlamsal açıdan işe yaramaz , kodunuzu esnek hale getirmez. Bazı tarayıcılarda bu div ek yüksekliğe neden olur ve height: 0;hangisini daha da kötüye eklemeniz gerekir . Ancak gerçek sorunlar, yüzen öğelerinize arka plan veya kenarlık eklemek istediğinizde başlar - web kötü tasarlandığı için çökecek . Kayan öğeleri clearfix CSS kuralı olan kaba sarmanızı öneririm . Bu da kesmek, ama güzel, kullanımı daha esnek ve insan ve SEO robotları için okunabilir.

Bir öğenin diğer öğenin altına yerleştirilmesini istediğinizde bu kodu CSS'de kullanırsınız. Şamandıralar için kullanılır.

İçeriği yüzerseniz sola veya sağa yüzebilirsiniz ... yani ortak bir düzende sol gezinme bölmesi, içerik bölmesi ve altbilgi olabilir.

Altbilginin bu yüzenlerin her ikisinin altında kalmasını sağlamak için (sağa ve sola yüzdüyseniz), altbilgiyi şu şekilde koyarsınız clear: both.

Bu şekilde her iki şamandıranın altında kalacaktır.

(Sadece sola temizliyorsanız, sadece gerçekten yapmanız gerekir clear: left;.)

Bu eğiticiyi gözden geçirin: