Neden'eğer varsa kapsayıcı öğe bir artış yüksekliği t elemanları süzülüyor değil mi?

Yükseklik ve yüzer nasıl çalıştığını sormak istiyorum. Bir dış div ve içeriği olan içsel bir div var. Yüksekliği iç div içeriğine göre değişebilir ama içimdeki div div dışına taşma gibi görünüyor. Bunu yapmak için doğru yolu ne olurdu? Herhangi bir yardım çok mutluluk duyacağız. Teşekkürler!

<html>
<body>
<div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange">
    <div style="width:500px; height:200px; background-color:black; float:right">
    </div>
</div>
</body>
</html>

CEVAP

15 Mayıs 2013, ÇARŞAMBA

Unsurları kapsayıcı öğe yüksekliği eklemeyin süzülüyor, ve bu yüzden onları temizlemek yok eğer doğru değilse, konteyner yüksekliği artış olmayacak...

Size resimli bir şekilde göstereceğim

enter image description here

Daha Fazla Açıklama:

<div>
  <div style="float: left;"></div>
  <div style="width: 15px;"></div> <!-- This will shift 
                                        beside the top div, why? because the top div 
                                        is floated to left, and hence making the 
                                        rest of the space blank -->

  <div style="clear: both;"></div> 
  <!-- Now in order to prevent the next div to float besides the top ones 
       we use `clear: both;`, this is like a wall, so now none of the div's 
       will be floated after here and also the container will now count the 
       height of these floated divs -->
  <div></div>
</div>

Ayrıca konteyner elemanları overflow: hidden; ekleyebilirsiniz, ama sana clear: both; yerine kullanmanızı öneririm.

Ayrıca eğer herhangi bir öğe kendi temizlemek ister

.self_clear:after {
  content: "";
  clear: both;
  display: table;
}

CSS Şamandıra nasıl Çalışır?

Şamandıra tam olarak nedir ve ne işe yarar?

float emlak float ne yeni başlayanlar en iyi tarafından yanlış anlaşılabilir mi? Başlangıçta, float emlak left süzülüyor resim, metin akışını tanıtıldı right da here işaret etti^{@Uchicha Madara}.
Yan tarafından yan kutuları yerleştirmek için float özelliği kullanmak yanlış mı? cevap dahahayıreğer float özelliği , O'na yanında kutuları yan kullanırsanız sorun yok.
inline block düzey bir unsur kayan eleman inline-block bir element gibi davranır.
Demo
left right element width herhangi bir öğe kayan width açıkça tanımlanmış sürece tutar içeriği ile sınırlı olacak ...
float ** 27, bu her zaman yeni başlayanlarda gördüğüm en büyük sorun ise, kullanarak bir öğe olamaz~~float: center;~~genellikle float/için kullanılan çok içeriği taşıyabilirsolya da çokdoğru. Sadece vardırdörtfloat özellik için geçerli değerler., *, none *right33 e^Varsayılan, 36**.
Üst öğe çöker, ne zaman içerir süzülüyor alt öğeler, O'na önlemek için bunu kullanırız clear: both; tesiste, açık süzülüyor elemanları hem de, daha iyi bir engelle çöken üst öğe. Daha fazla bilgi için, benim başka bir cevap 119* *başvurabilirsiniz.
(Önemli)Çeşitli öğeler yığını var bir yerde düşün. float: left; float: right; kullandığımızda unsuru bir yığın üstünde taşır. Dolayısıyla normal belge akışı öğeleri normal süzülüyor element. seviye yığın çünkü elemanları süzülüyor arkasında gizler.(Lütfen bu tamamen farklı olduğu gibi z-index bu ilişki yok.)

Almadan bir dava olarak örnek açıklar CSS floats iş varsayarsak ihtiyacımız olan basit bir 2 sütun düzeni ile üstbilgi, altbilgi ve 2 sütun, yani burada ne mavi baskı... gibi görünüyor

enter image description here

Yukarıdaki örnekte, biz sadece kayan kırmızı kutuları da olabilir float left float left başkasının right de bağlıdır düzeni, eğer bu 3 sütun, float 2 sütun left başka bir tane right çok bağlıdır, ama bu örnek, right float left ve diğer bir çok basitleştirilmiş 2 sütun düzeni var.

Düzeni, daha detaylı bir şekilde oluşturmak için biçimlendirme ve stilleri...

<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üzeni ile adım adım git ve nasıl çalıştığını görmek.. sağlar

Öncelikle, kullandığımız bir ana kapsayıcı öğe, sadece varsayalım ki Senin görünüm penceresi, daha biz kullanmak header ve ata height 50px çok süslü bir yer yok.. sadece normal olmayan süzülüyor blok düzeyi öğesi olan alacak 100% Yatay Boşluk olmadan süzülüyor veya atamak inline-block.

İlk geçerli değer float left bu örneğimizde, biz kullanmak float: left; .floated_left, yani niyetimiz bu yüzen bir engelleme left bizim kapsayıcı öğe.

Column floated to the left

Ve evet, eğer görürsen, .wrapper olan ana öğe, daraltılmış, yeşil bir sınır ile gördüğünüz bir genişletilmiş yoktu, ama sorun olmaz değil mi? Bunun için şimdilik bir süre içinde gelecektir, bir sütun left süzülüyor var.

İkinci sütun için geliyor right float bu bir sağlar

Another colummn floated to the right

Burada, biz bir 300px geniş sütun olan float right, oturmak ayrıca ilk sütun gibi süzülüyor, left, ve o zamandan beri o yüzen için left, yarattığı boş hendeğe right, ve o zamandan beri orada geniş bir alan üzerinde right right süzülüyor eleman oturdu mükemmel ayrıca left.

Hala ana öğe çöktü, artık düzeltme sağlar. Çökmüş alıyorum ana öğe önlemek için birçok yol vardır.

Ekle boş bir blok düzeyi öğesi ve kullanımı clear: both; önce üst öğe biter, hangi tutar süzülüyor elemanları, şimdi bu ucuz çözüm clear kayan eleman yapacakları iş için ama ben tavsiye edeceğini kullanmak için değil bu.

, <div style="clear: both;"></div> .wrapper div bitmeden gibi ekleyin

<div class="wrapper clear">
    <!-- Floated columns -->
    <div style="clear: both;"></div>
</div>

Demo

Peki, bunu düzeltmeleri çok iyi, hiçbir çöken üst artık, ama ekler gereksiz biçimlendirme için DOM, bu yüzden bazı önermek için kullanın. overflow: hidden; üst öğe holding süzülüyor alt öğeleri olan çalışır olarak tasarlanmıştır.

.wrapper overflow: hidden; kullanın

.wrapper {
    border: 3px solid green;
    overflow: hidden;
}

Demo

O kurtarır bizi bir öğe her zaman ihtiyacımız var clear float ama ben test çeşitli durumlarda bu, başarısız bir tanesi, hangi kullanır box-shadow alt öğe.

124* *(4 tarafı gölge göremiyor, overflow: hidden; bu sorun neden olur)

Şimdi ne olacak? Tasarruf unsuru, hayır overflow: hidden; bu yüzden gitmek için bir açık düzeltme hack kullanımı aşağıda parçasında CSS, ve sadece olarak kullanın overflow: hidden; için üst öğe arama class aşağıda üst öğe için kendini Temizle..

.clear:after {
    clear: both;
    content: "";
    display: table;
}

<div class="wrapper clear">
    <!-- Floated Elements -->
</div>

Demo

Burada, gölge olması gerektiği gibi çalıştığından, aynı zamanda, kendi kendine çökmesi engelleyen ana unsur.. temizler

Ve son olarak, 94 ** sonra altbilgi kullandığımız öğeleri süzülüyor.

Demo

float: none; float: none; ilan için kullanmak için varsayılan, olarak zaten kullanılır?

Eğer duyarlı bir tasarım için gidiyoruz eğer yani, duruma göre değişir, bu değer öğeleri belirli bir çözünürlükte bir aşağıda bir hale sürüklendiğini istediğiniz zamanlar, bir çok kullanır. Bunun için float: none; özellik.. orada önemli bir rol oynar

float yararlı.. ne kadar az gerçek dünya örnekleri

Daha öncede gördüğümüz ilk örnek ya da daha fazla birden fazla birden çok sütun düzeni oluşturmak için.
img kullanarak içerik akmasını sağlayacak p içeri süzülüyor.

127* *(img kayan Olmadan)

128* *(img left süzülüyor)