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 także dodawać overflow: hidden;elementy kontenera, ale sugeruję użycie clear: both;zamiast tego.
Również jeśli chcesz samodzielnie wyczyścić element, którego możesz użyć
.self_clear:after {
content: "";
clear: both;
display: table;
}
Jak działa CSS Float?
Czym jest dokładnie float i co robi?
floatNieruchomość jest niezrozumiany przez większość początkujących. Co dokładnie robi float? Początkowo floatwłaściwość została wprowadzona do przepływu tekstu wokół obrazów, które są pływające leftlub right. Oto kolejne wyjaśnienie @Madara Uchicha.
Czy zatem niewłaściwe jest używanie tej floatwłaściwości do umieszczania pól obok siebie? Odpowiedź brzmi: nie ; nie ma problemu, jeśli użyjesz tej floatwłaściwości do ustawiania pól obok siebie.
Przestawienie elementu inlinelub blockpoziomu spowoduje, że element będzie się zachowywał jak inline-blockelement.
PróbnyJeśli umieścisz element leftlub element right, widthelement będzie ograniczony do zawartości, która zawiera, chyba że widthzostanie wyraźnie określony ...
Nie możesz floatelementu center. Jest to największy problem, jaki zawsze widziałem dla początkujących, którzy używają float: center;floatwłaściwości. floatjest zwykle używany do float/ przenoszenia treści na bardzo lewo lub na prawo . Istnieją tylko cztery ważne wartości dla floatIE nieruchomości left, right, none(domyślnie) i inherit.
Element macierzysty zwija się, gdy zawiera pływające elementy potomne, aby temu zapobiec, używamy clear: both;właściwości do usuwania pływających elementów po obu stronach, co zapobiegnie zwijaniu się elementu macierzystego. 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. Kiedy używamy float: left;lub float: right;element przesuwa się ponad stos o jeden. Dlatego elementy w normalnym obiegu dokumentów ukryją się za elementami pływającymi, ponieważ znajdują się na poziomie stosu powyżej normalnych elementów pływających. (Proszę nie odnosić się do tego, z-indexponieważ jest to zupełnie inne.)
Biorąc przykład za przykład, aby wyjaśnić, jak działają ruchy CSS, zakładając, że potrzebujemy prostego układu 2 kolumn z nagłówkiem, stopką i 2 kolumnami, więc oto, jak wygląda plan ...
W powyższym przykładzie będziemy unosić się tylko na czerwonych polach, albo możesz floatzarówno do left, lub możesz floatdo left, a także do innego right, zależy od układu, jeśli są to 3 kolumny, możesz float2 kolumny do leftinnych jeden do tego rightzależy, chociaż w tym przykładzie mamy uproszczony układ 2 kolumn, więc floatjedna do leftdrugiej, a druga do right.
Znaczniki i style tworzenia układu wyjaśnione dalej ...
<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 z układem i zobaczmy, jak działa float ..
Przede wszystkim, używamy główny element otoki, można po prostu założyć, że to twoja rzutni, a następnie używamy headeri przypisać heightod 50pxtak tam nic nadzwyczajnego. Jest to po prostu zwykły, nieopływający element poziomu bloku, który zajmie 100%przestrzeń poziomą, chyba że zostanie uniesiony lub przypisamy inline-blockgo.
Pierwszą prawidłową wartością dla parametru floatjest leftwięc w naszym przykładzie, float: left;dla .floated_leftktórego zamierzamy przenieść blok do leftelementu naszego kontenera.
Kolumna przesunęła się w lewo
I tak, jeśli widzisz, element nadrzędny, który jest .wrapperzwinięty, ten z zieloną ramką nie rozwinął się, ale powinien mieć rację? Wrócimy do tego za chwilę, na razie mamy kolumnę przeniesioną left.
Przechodząc do drugiej kolumny, pozwólmy, by floatta trafiła doright
Kolejna kolumna unosiła się w prawo
Tutaj mamy 300pxszeroką kolumnę, którą my floatdo right, która będzie siedzieć obok pierwszej kolumny, gdy jest ona unoszona do left, a ponieważ jest unoszona do left, stworzyła pustą rynnę do right, a ponieważ było dużo miejsca na rightnaszym rightelement pływający idealnie pasował do lefttego.
Mimo to element nadrzędny jest zwinięty, więc naprawmy to teraz. Istnieje wiele sposobów zapobiegania zwinięciu elementu nadrzędnego.
- Dodaj pusty element na poziomie bloku i użyj go
clear: both;przed zakończeniem elementu nadrzędnego, który zawiera elementy pływające, teraz ten jest tanim rozwiązaniem dla clearelementów pływających, które wykonają zadanie za Ciebie, ale odradzam korzystanie z tego.
Dodaj, <div style="clear: both;"></div>przed .wrapper divkońcami, jak
<div class="wrapper clear">
<!-- Floated columns -->
<div style="clear: both;"></div>
</div>
Próbny
Cóż, to naprawia bardzo dobrze, nie ma już zwiniętego overflow: hidden;elementu nadrzędnego, ale dodaje niepotrzebne znaczniki do DOM, więc niektórzy sugerują, aby użyć elementu nadrzędnego zawierającego 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;
}
Próbny
To oszczędza nam elementu za każdym razem, gdy potrzebujemy, clear floatale ponieważ testowałem różne przypadki z tym, zawiodło w jednym, który wykorzystuje box-shadowelementy potomne.
Demo (nie widać cienia ze wszystkich 4 stron,overflow: hidden;powoduje ten problem)
Co teraz? Zapisz element, overflow: hidden;więc nie idź po wyraźny hack naprawczy, użyj poniższego fragmentu kodu w swoim CSS i tak jak używasz overflow: hidden;elementu nadrzędnego, wywołaj classponiższy element nadrzędny, aby sam wyczyścić.
.clear:after {
clear: both;
content: "";
display: table;
}
<div class="wrapper clear">
<!-- Floated Elements -->
</div>
Próbny
W tym przypadku cień działa zgodnie z przeznaczeniem, samoczynnie usuwa element macierzysty, co zapobiega jego zawaleniu.
I wreszcie, używamy stopki po cleartym, jak pływamy elementy.
Próbny
Kiedy i tak jest float: none;używany, ponieważ jest to domyślny, więc czy ma to jakiś cel float: none;?
Cóż, to zależy, jeśli wybierasz responsywny projekt, użyjesz tej wartości wiele razy, gdy chcesz, aby elementy pływające renderowały się jeden pod drugim w określonej rozdzielczości. Ponieważ ta float: none;właściwość odgrywa tam ważną rolę.
Kilka rzeczywistych przykładów tego, jak floatprzydatne.
- Pierwszym przykładem, który już widzieliśmy, jest utworzenie jednego lub więcej układów kolumn.
- Korzystanie z elementów
imgpływających, pktóre umożliwi przepływ naszych treści.
Demo (bez pływającegoimg)
Demo 2 (imgwprowadzono doleft)
- Używanie
floatdo tworzenia menu poziomego - Demo
Przestaw także drugi element lub użyj „margin”
Na koniec, chcę wyjaśnić ten konkretny przypadek, w którym floattylko jeden element do jednego, leftale nie floatdo drugiego, więc co się stanie?
Załóżmy, że jeśli usuniemy float: right;z naszego .floated_right class, divbędą renderowane z ekstremalnych, leftponieważ nie są pływające.
Próbny
Więc w tym przypadku, albo możesz floatdo leftjak dobrze
LUB
Możesz użyć, margin-leftktóra będzie równa wielkości lewej pływającej kolumny, tj200px . Szerokiej .