Aşağıdaki CSS kuralı ne yapar:

.clear { clear: both; }

Ve neden bunu kullanmaya gerek var mı?

Bu soru genellikle üzerinde duruluyor olarak burada (ayrıntılı olarak) çalışma yüzer açıklayan olmayacağımNeden clear: both; clear: both; tam olarak ne iş yapar...

clear: both; neden gerekli olduğu ya da ne bu cevap basit tutun ve sadede geleceğim ve size grafiksel olarak açıklar

Genellikle tasarımcılar elemanları, sol ve diğer elementler kalan yer almak sağlayan diğer tarafta boş bir alan oluşturan sağa kaydır.

Elementler neden yüzer?

Elemanları tasarımcısı yan tarafından 2 blok düzeyi öğeler yan gerektiğinde satışa çıkardı. Örneğin aşağıda ki gibi bir düzen vardır, basit bir web sitesi tasarlıyoruz

Demo resim Live Example.

Demo İçin Kod

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>

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;
}

Not:Belki senin de eklemek header, footer, aside, section (ve diğer HTML5 elemanları) display: block; senin stil için açıkça söz unsurlardır blok düzeyi öğeler.

Açıklama:

Temel bir düzen var, 1, 1 yan, 1 içerik alanı bar üstbilgi ve altbilgi 1.

Hazırlıklarını sola elemanı kayan olacağım bu yüzden web siteme kenar çubuğu için kullanacağım aside etiket sıradaki header, hayır.

Not: Varsayılan olarak, blok düzeyi öğesi belge 100% genişlik kaplıyor, ama ne zaman ya göre yeniden boyutlandırmak olacak, Sağ, Sol süzülüyor tutar içerik.

1. Normal Behavior Of Block Level Element
2. Floated Behavior Of Block Level Element

Not olarak, sol div uçurdu sonra div kalan alana kayması sağlayacak olan doğru kullanılmayan, için boşluk bırakır.

1. div's will render one after the other if they are NOT floated
2. div will shift beside each other if floated left or right

Ok, bu yüzden nasıl seviye elemanları ya şimdi neden clear: both; gerekli ve neden bu kadar sol yüzerken blok davranır?

Eğer unuttuysan düzen demo not -, 64**..

Bir sınıfı .clear denilen kullanıyorum ve bir özellik clear denilen both değeri tutar. Yani both ihtiyacı neden görmenizi sağlar.

Ettim süzülüyor aside section öğeleri sola, yani varsayalım bir senaryo, nerede var bir havuz, nereye header katı toprak, aside section yüzer havuz ve altbilgi katı toprak yine, bu gibi bir şey..

Yani Mavi Su var ne alan yüzen elementler vardır, bunlar daha büyük bir havuz ya da küçük, yani işte bir ortak sorunu olan sorunlar 90% CSS yeni başlayanlar: neden arka planda bir kapsayıcı öğe değildir gergin tutar süzülüyor elemanları. Kapsayıcı bir unsur olduğu içinHAVUZUburada veHAVUZUuzunluğu veya genişliği unsurlardır süzülüyor ne yüzen, ya da nasıl hiçbir fikri yok, sadece germek istemiyorum.

1. Normal Flow Of The Document
2. Sections Floated To Left
3. Cleared Floated Elements To Stretch Background Color Of The Container

(Bakınız^[Clearfix]düzgün bir şekilde bu cevap bölümünde bunu yapmak için. Kasten div boş bir örnek açıklama amaç için kullanıyorum

3 yukarıdaki örnekler, 1 red arka plan konteyner tutmaz bu yana beklendiği gibi sadece işlerler normal belge akışını herhangi bir nesne yüzen sağladık.

Nesne sola süzülüyor zaman ikinci örnekte, kapsayıcı öğesi (HAVUZ) boyutları unsurları süzülüyor ve bu nedenle öğeleri yükseklik süzülüyor germek olmaz bilemem.

clear: both;, kapsayıcı öğesi kullandıktan sonra süzülüyor öğesi için gergin olacak boyutları.

clear: both; kullanılan başka bir sebep öğesi kalan alana shift önlemektir.

Söyle onlara aşağıdaki yan 2 yan elemanları ve diğer unsur istediğiniz... sol 2 elemanları koşacaksın ve bunların altında başka istiyorsun.

1. div Floated left resulting in section moving into remaining space
2. Floated div cleared so that the section tag will render below the floated divs

1 Örnek

2 Örnektir

Son ama en az değil, footer etiket olacak işlenebilecek sonra süzülüyor elemanları olarak kullandığım clear dersten önce ilan benim footer etiketleri, hangi sağlayan tüm süzülüyor eleman (Sol/Sağ) temizlenene kadar.

Clearfix

Önümüzdeki yüzer ile ilgili clearfix. Zaten belirtilen @Elky yol biz temizleyerek bu yüzen değil temiz bir şekilde yapmak gibi kullanarak boş bir div element olan div unsurudur demek için. Dolayısıyla geliyor clearfix.

Ana unsur bitmeden senin için boş bir öğe yaratacak olan sanal bir unsur olarak düşün. Bu öz kapsayıcı öğe holding yüzen öğeleri temizler. Bu eleman senin DOM tam anlamıyla yok olacak ama iş yapacak.

Herhangi bir kapsayıcı öğe elemanları süzülüyor olması, kendini temizlemek için kullanabiliriz

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

:after sözde öğe class beni bunun için kullanılan unutmayın. Kendisi kapanmadan hemen önce kapsayıcı öğesi için sanal bir öğe oluşturur. Eğer dom bakacak olursak Belge ağacında gösterir.

Eğer öyleyse bakın, işlenen sonra yüzen çocuk div nereye biz açık yüzen başka bir şey değildir eşdeğer bir boş div eleman clear: both; özelliği olan biz kullanmak için bu çok fazla. Şimdi display: table; neden content cevaplar bu kapsam dışında ama daha pseudo element here hakkında bilgi alabilirsiniz.

Bu da IE8 supports :after pseudo IE8 çalışacağını unutmayın.

Orijinal Cevabı:

Geliştiriciler çoğu sol ya da sayfaları, muhtemelen divs holding logo, Kenar Çubuğu, içerik vb. içerikleri, şamandıra bu divs vardır süzülüyor sol veya sağ bırakarak dinlenme alanı kullanılmayan ve dolayısıyla koyarsanız, diğer kaplarda, olacak uçacaksın içinde kalan alan, bu yüzden önlemek için clear: both; kullanılır, temizler tüm unsurları süzülüyor sol veya sağ.

Gösteri:

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

Tüm yüzen temiz sağlamak, sola veya sağa böylece clear: both; kullanacaksınız eğer öyleyse işlemek div1, aşağıda başka bir div yapmak istiyorsanız, şimdi ne

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