Elementy pływające nie zwiększają wysokości elementu kontenera, a zatem jeśli ich nie wyczyścisz, wysokość kontenera Nie wzrośnie...

Pokażę Ci wizualnie:

Więcej Wyjaśnień:

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

Możesz również dodać overflow: hidden; do elementów kontenera, ale sugerowałbym użycie clear: both;.

Również jeśli chcesz samooczyścić element możesz użycie

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

Jak działa CSS Float?

Czym jest float i do czego służy?

• Właściwość float jest niezrozumiana przez większość początkujących. Co dokładnie robi float? Początkowo właściwość float została wprowadzona do przepływu tekstu wokół obrazów, które są pływane left lub right. oto inne wyjaśnienie przez @ Madara Uchicha.

  Więc, czy źle jest używać właściwości float do umieszczania pudełek ramię w ramię? Odpowiedź brzmi no ; nie ma problemu, jeśli używasz właściwości float do ustawiania pól obok siebie.

• Floating An inline or block level element sprawi, że element będzie zachowywał się jak element inline-block.

  Demo

• Jeśli zmiennoprzecinkowy element left lub right, width elementu będzie ograniczony do przechowywanej przez niego zawartości, chyba że width jest zdefiniowany jawnie ...

• Nie można float elementu center. Jest to największy problem, jaki zawsze widziałem u początkujących, używając float: center;, która nie jest poprawną wartością dla właściwości float. float jest zwykle używany do float/przeniesienia zawartości do samego w lewo lub do samego w prawo . Istnieją tylko cztery ważne wartości dla float własności tj. left, right, none (default) oraz inherit.

• Element rodzic zwija się, gdy zawiera pływających elementów potomnych, aby temu zapobiec, używamy właściwości clear: both;, aby wyczyścić pływających elementów po obu stronach, co zapobiegnie zapadaniu się elementu rodzica. Aby uzyskać więcej informacji, możesz odnieść się do mojej innej odpowiedzi tutaj .

• (ważne) pomyśl o tym, gdzie mamy stos różnych elementów. Gdy używamy float: left; lub float: right; element porusza się nad stosem o jeden. W związku z tym elementy w normalnym przepływie dokumentu ukryją się za elementami pływającymi, ponieważ znajdują się na poziomie stosu powyżej zwykłych elementów pływających. (proszę nie odnosić tego do z-index, ponieważ to zupełnie co innego.)

Biorąc przypadek jako przykład, aby wyjaśnić, jak działa CSS floats, zakładając, że potrzebujemy prostego układu kolumn 2 z nagłówkiem, stopką i kolumnami 2, więc oto, jak wygląda plan na przykład...

W powyższym przykładzie będziemy unosić się tylko czerwone pola, albo możesz float zarówno do left, lub możesz float do left, a inny do right również, zależy od układu, jeśli jest to 3 kolumny, możesz float 2 kolumny do left gdzie inny do right Tak zależy, chociaż w tym przykładzie mamy uproszczony układ kolumn 2, więc jeden do left, a drugi do right.

Znaczniki i style do tworzenia układ wyjaśniony dalej w dół...

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

Przejdźmy krok po kroku do układu i zobaczmy, jak działa float..

Po pierwsze, używamy głównego elementu wrappera, możesz po prostu założyć, że to Twój viewport, następnie używamy header i przypisujemy height Z 50px, więc nie ma tam nic wymyślnego. Jest to po prostu normalny, nie pływający element poziomu bloku, który zajmie 100% przestrzeń poziomą, chyba że jest pływający lub przypisujemy mu inline-block.

Pierwsza poprawna wartość dla float to left w naszym przykładzie używamy float: left; dla .floated_left, więc zamierzamy przenieść blok do left naszego elementu kontenera.

Kolumna przesunięta w lewo

I tak, jeśli widzisz, element nadrzędny, który jest .wrapper jest zwinięty, ten, który widzisz z zieloną obwódką nie rozszerzył się, ale powinien mieć rację? Wrócimy do tego za jakiś czas, na razie mamy kolumnę do left.

Idąc do drugiej kolumny, pozwala to float Ten do right

Kolejna kolumna w prawo

Tutaj, mamy 300px szeroką kolumnę, którą float do right, która będzie siedzieć obok pierwszej kolumny, gdy jest ona pływająca do left, a ponieważ jest ona pływająca do left, stworzyła pustą rynnę do right, a ponieważ na right było dużo miejsca, nasz {12]} pływający element siedział idealnie obok left.

Mimo to Element nadrzędny jest zwinięty, cóż, naprawmy to teraz. Istnieje wiele sposobów, aby zapobiec zwinięciu elementu nadrzędnego.

• Dodaj pusty element poziomu bloku i użyj clear: both; przed zakończeniem elementu nadrzędnego, który zawiera elementy pływające, teraz ten jest tanim rozwiązaniem dla clear Twoich elementów pływających, które wykonają zadanie za ciebie, ale radzę nie używać tego.

Dodaj, <div style="clear: both;"></div> przed .wrapper div końcówki, jak

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

Demo

Cóż, to bardzo dobrze naprawia, nie zwinięty rodzic już nie, ale dodaje niepotrzebne znaczniki do DOM, więc niektórzy sugerują, aby użyć overflow: hidden; na elemencie nadrzędnym zawierającym pływające elementy potomne, które działają zgodnie z przeznaczeniem.

Użyj overflow: hidden; na .wrapper

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

Demo

To oszczędza nam element za każdym razem, gdy musimy clear float ale ponieważ testowałem różne przypadki z tym, zawiodło to w jednym konkretnym, który używa box-shadow na elementach potomnych.

Demo (nie widzę cienia na wszystkich 4 stronach, overflow: hidden; powoduje ten problem)

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

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

Demo

Tutaj shadow działa zgodnie z przeznaczeniem, również samo-czyści element nadrzędny, który zapobiega zapadaniu się.

I na koniec używamy stopki po clear żywioły.

Demo

Kiedy float: none; jest używane tak czy inaczej, ponieważ jest domyślne, więc jakiekolwiek użycie do deklaracji float: none;?

Cóż, to zależy, Jeśli wybierasz responsywny projekt, będziesz używać tej wartości wiele razy, gdy chcesz, aby twoje elementy pływające renderowały jeden pod drugim w określonej rozdzielczości. Dla tego float: none; własność odgrywa tam ważną rolę.

Kilka rzeczywistych przykładów tego, jak float jest przydatne.

• pierwszym przykładem, który już widzieliśmy, jest tworzenie jednego lub więcej niż jednego układu kolumn.
• za pomocą img pływających wewnątrz p, które umożliwią przepływ naszych treści.

Demo (bez floatingu img)

Demo 2 (img left)

• używanie float do tworzenia poziomego menu - Demo

Float second element as well, or use 'margin'

Ostatni, ale nie najmniej, chcę wyjaśnić ten szczególny przypadek, w którym float tylko jeden element do left, ale nie float drugi, więc co się dzieje?

Załóżmy, że jeśli usuniemy {[35] } z naszego .floated_right class, div zostanie renderowany z extreme left, ponieważ nie jest pływany.

Demo

Więc w tym przypadku, albo można float do left jak również

Lub

Możesz użyć margin-left, który będzie równy rozmiarowi lewej kolumny tj. 200px szerokiemu.