Dlaczego Wysokość elementu kontenera nie wzrasta, jeśli zawiera elementy pływające?
Chciałbym zapytać, jak działa wysokość i pływak. Mam zewnętrzny div I wewnętrzny div, który ma w sobie zawartość. Jego wysokość może się różnić w zależności od zawartości wewnętrznego div, ale wydaje się, że mój wewnętrzny div przepełni swój zewnętrzny div. Jak to zrobić?
<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>
7 answers
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 robifloat
? Początkowo właściwośćfloat
została wprowadzona do przepływu tekstu wokół obrazów, które są pływaneleft
lubright
. 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ścifloat
do ustawiania pól obok siebie. -
Floating An
Demoinline
orblock
level element sprawi, że element będzie zachowywał się jak elementinline-block
. Jeśli zmiennoprzecinkowy element
left
lubright
,width
elementu będzie ograniczony do przechowywanej przez niego zawartości, chyba żewidth
jest zdefiniowany jawnie ...-
Nie można
float
elementucenter
. Jest to największy problem, jaki zawsze widziałem u początkujących, używając, która nie jest poprawną wartością dla właściwościfloat: center;
float
.float
jest zwykle używany dofloat
/przeniesienia zawartości do samego w lewo lub do samego w prawo . Istnieją tylko cztery ważne wartości dlafloat
własności tj.left
,right
,none
(default) orazinherit
. -
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;
lubfloat: 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 doz-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.
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
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 dlaclear
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)
overflow: hidden;
, więc przejdź do jasnej poprawki, użyj poniższego fragmentu w CSS, i tak jak używasz {[6] } dla elementu nadrzędnego, wywołaj class
poniżej na elemencie nadrzędnym, aby się wyczyścić.
.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ątrzp
, 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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-30 03:36:38
Musisz dodać overflow:auto
do swojego rodzica div, aby obejmował wewnętrzny pływający div:
<div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange;overflow:auto">
<div style="width:500px; height:200px; background-color:black; float:right">
</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-15 14:54:53
Napotykasz błąd float (choć nie jestem pewien, czy jest to technicznie błąd ze względu na to, ile przeglądarek wykazuje takie zachowanie). Oto co się dzieje:
W normalnych okolicznościach, zakładając, że nie ustawiono jawnej wysokości, element poziomu bloku, taki jak div, ustawia swoją wysokość na podstawie jego zawartości. Dno elementu nadrzędnego wykracza poza ostatni element. Niestety, floating element uniemożliwia rodzicowi wzięcie pod uwagę pływającego elementu przy określaniu jego wysokości. Oznacza to, że jeśli twój ostatni element jest pływający, nie" rozciągnie " rodzica w taki sam sposób, jak normalny element.
Clearing
Są dwa wspólne sposoby, aby to naprawić. Pierwszym jest dodanie elementu "clearing", czyli innego elementu poniżej pływającego, który zmusi rodzica do rozciągnięcia. Więc dodaj następujący kod html jako ostatnie dziecko:
<div style="clear:both"></div>
Nie powinno być widoczne, a używając clear: both, upewniasz się, że nie usiądzie obok pływającego elementu, ale po nim.
Przepełnienie:
Druga metoda, która jest preferowana przez większość ludzi (myślę), to zmiana CSS elementu nadrzędnego tak, aby przepełnienie nie było "widoczne". Ustawienie przepełnienia na "Ukryte" zmusi rodzica do rozciągnięcia się poza dno pływającego dziecka. Jest to prawdą tylko wtedy, gdy nie ustawiłeś wysokości na rodzicu, oczywiście.
Jak już mówiłem, druga metoda jest preferowana, ponieważ nie wymaga dodawania semantycznie bezsensownych elementów do znaczników, ale są chwile, kiedy trzeba overflow
być widocznym, w którym to przypadku dodanie elementu czyszczącego jest więcej niż dopuszczalne.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-05 11:36:24
To ze względu na pływak div. Dodaj overflow: hidden
na zewnętrznym elemencie.
<div style="overflow:hidden; margin:0 auto;width: 960px; min-height: 100px; background-color:orange;">
<div style="width:500px; height:200px; background-color:black; float:right">
</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-15 14:55:52
Mylisz sposób, w jaki przeglądarki renderują elementy, gdy istnieją elementy pływające. Jeśli jeden element blokowy jest pływający (twój wewnętrzny div w Twoim przypadku), inne elementy blokowe zignorują go, ponieważ przeglądarka usuwa elementy pływające z normalnego przepływu strony internetowej. Następnie, ponieważ pływający div został usunięty z normalnego przepływu, zewnętrzny div jest wypełniony, tak jak wewnętrzny div nie ma. Jednak elementy inline (obrazy, linki, tekst, Czarne cytaty) będą respektować granice element pływający. Jeśli wprowadzasz tekst w zewnętrznym div, tekst będzie umieszczał arround de inner div.
Innymi słowy, elementy blokowe (nagłówki, akapity, divs itp.) ignorują elementy pływające i wypełniają, a elementy wbudowane (obrazy, linki, tekst itp.) respektują granice elementów pływających.
<body>
<div style="float:right; background-color:blue;width:200px;min-height:400px;margin-right:20px">
floating element
</div>
<h1 style="background-color:red;"> this is a big header</h1>
<p style="background-color:green"> this is a parragraph with text and a big image. The text places arrounds the floating element. Because of the image is wider than space between paragrah and floating element places down the floating element. Try to make wider the viewport and see what happens :D
<img src="http://2.bp.blogspot.com/_nKxzQGcCLtQ/TBYPAJ6xM4I/AAAAAAAAAC8/lG6XemOXosU/s1600/css.png">
</p>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-15 15:25:49
Spróbuj tego
.parent_div{
display: flex;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-08-05 07:48:29
Możesz użyć właściwości overflow do kontenera div, jeśli nie masz żadnego div do pokazania nad kontenerem np:
<div class="cointainer">
<div class="one">Content One</div>
<div class="two">Content Two</div>
</div>
Oto następujący css:
.container{
width:100%;/* As per your requirment */
height:auto;
float:left;
overflow:hidden;
}
.one{
width:200px;/* As per your requirment */
height:auto;
float:left;
}
.two{
width:200px;/* As per your requirment */
height:auto;
float:left;
}
-----------------------lub------------------------------
<div class="cointainer">
<div class="one">Content One</div>
<div class="two">Content Two</div>
<div class="clearfix"></div>
</div>
Oto następujący css:
.container{
width:100%;/* As per your requirment */
height:auto;
float:left;
overflow:hidden;
}
.one{
width:200px;/* As per your requirment */
height:auto;
float:left;
}
.two{
width:200px;/* As per your requirment */
height:auto;
float:left;
}
.clearfix:before,
.clearfix:after{
display: table;
content: " ";
}
.clearfix:after{
clear: both;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-03 01:57:17