210

Chciałbym zapytać, jak działa wysokość i pływak. Mam zewnętrzny div i wewnętrzny div, który zawiera w sobie treść. 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. Jaki byłby to właściwy sposób?

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

html css css-float Boy Pasmo
źródło

możliwy duplikat CSS: min-wysokość nie działa lub CSS: problem z wysokością div na zestawie pływakowym

Shauna

ładne i bardzo dobre dzięki!

Bassam Alugili

możliwy duplikat elementów pływających w div, unosi się na zewnątrz div. Czemu?

Oriol

581

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:

wprowadź opis zdjęcia tutaj

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óbny
Jeś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;~~, co nie jest prawidłową wartością 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 ...

wprowadź opis zdjęcia tutaj

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 .

Pan Alien
źródło

3

Fakt, że zmiennoprzecinkowe nie wpływają na wysokość elementu nadrzędnego na poziomie bloku, jest wyraźnie określony tutaj w specyfikacji: w3.org/TR/CSS21/visudet.html#normal-block Powodem dodania poprawki jest to, że 1) poprawka jest (zwykle) w normalnym przepływie 2) czyszczenie pływaków wymaga umieszczenia poprawki na samym dnie pływaków 3) pojemnik musi być rozciągnięty, aby zawierał tę poprawkę.

BoltClock

@ BoltClock byłoby lepiej, gdybyś cofnął edycję tytułu, ponieważ poważnie wpłynie to na SEO dla użytkowników, którzy dowiedzą się, jak działa float. Możesz napisać te warunki w Google i sprawdzić ... w przeciwnym razie ta kanoniczna odpowiedź nie przyda się, jeśli ludzie są nie mogąc znaleźć tego, czego szukają.

Pan Alien

„Jak działa float CSS?” jest niezwykle szerokim tytułem, a także wprowadza w błąd ludzi, którzy chcą głosować, by zamknąć każde pytanie typu float jako duplikat tego pytania . Pytanie dotyczy tylko jednego aspektu: pływające pojemniki (lub nie zawijane).

BoltClock

@BoltClock Anyways Informacja techniczna pozostaje taka sama, jak wyjaśniono clear: both;, ale to jest w porządku, jeśli czujesz EDIT uzasadnia więc pozwala zachować w ten sposób

Mr. Alien

1

genialna odpowiedź. „Przesuwając dowolny element w lewo lub w prawo, szerokość elementu będzie ograniczona do zawartości, która zawiera, chyba że szerokość jest wyraźnie określona” - zauważyłem to samo i szukałem tylko tego, aby to potwierdzić. Dziękuję

Deen John,

38

Musisz dodać overflow:autodo rodzica div, aby obejmował on wewnętrzny div 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>

Przykład jsFiddle

j08691
źródło

6

to nie jest rozwiązanie, ukrywasz treści, które wychodzą poza granice zewnętrznego div.

Alejandro Ruiz Arias

@AlejandroRuizArias - Dokładnie w jaki sposób coś się ukrywa?

j08691

3

W tym przykładzie nic, ale jeśli wprowadzisz wystarczającą ilość treści do wewnętrznego div, tak.

Alejandro Ruiz Arias

To nie robi tego, czego szukał OP: Forked jsfiddle.net/h0ceb5ra

TecBrat

1

Niesamowite. Jedynym atrybutem, którego szukałem, gdyby wszystko inne było tak łatwe, nie byłoby potrzeby kurczenia się.

YK

10

Napotykasz błąd float (choć nie jestem pewien, czy to technicznie błąd z powodu liczby przeglądarek wykazujących takie zachowanie). Oto co się dzieje:

W normalnych okolicznościach, zakładając, że nie została ustawiona żadna wyraźna wysokość, element na poziomie bloku, taki jak div, ustawi wysokość na podstawie zawartości. Dół rodzica div będzie wystawał poza ostatni element. Niestety, przestawienie elementu uniemożliwia rodzicowi uwzględnienie elementu pływającego przy określaniu jego wysokości. Oznacza to, że jeśli twój ostatni element jest zmiennoprzecinkowy, nie „rozciągnie” elementu nadrzędnego w taki sam sposób, jak normalny element.

Clearing

Istnieją dwa typowe sposoby rozwiązania tego problemu. Pierwszym jest dodanie elementu „czyszczącego”; to znaczy kolejny element poniżej pływającego elementu, który zmusi rodzica do rozciągnięcia. Dodaj następujący HTML jako ostatnie dziecko:

<div style="clear:both"></div>

Nie powinien być widoczny, a używając clear: oba, upewniasz się, że nie będzie siedział obok elementu pływającego, ale po nim.

Przelewowy:

Druga metoda, która jest preferowana przez większość ludzi (myślę), polega na zmianie CSS elementu nadrzędnego, aby przepełnienie nie było „widoczne”. Tak więc ustawienie przelewu na „ukryte” zmusi rodzica do rozciągnięcia poza dno pływającego dziecka. Jest to prawdą tylko wtedy, gdy nie ustawiłeś wysokości nadrzędnego.

Jak powiedziałem, druga metoda jest preferowana, ponieważ nie wymaga od ciebie dodawania semantycznie nieistotnych elementów do znaczników, ale są chwile, kiedy potrzebujesz overflowbyć widoczny, w którym to przypadku dodanie elementu usuwającego jest więcej niż dopuszczalne .

Maloric
źródło

3

To z powodu pływaka div. Dodaj overflow: hiddenelement zewnętrzny.

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

Próbny

Starx
źródło

3

Mylisz sposób, w jaki przeglądarki renderują elementy, gdy są elementy pływające. Jeśli jeden element bloku jest zmiennoprzecinkowy (w twoim przypadku wewnętrzny div), inne elementy blokowe go zignorują, ponieważ przeglądarka usuwa elementy pływające z normalnego przepływu strony internetowej. Następnie, ponieważ zmiennoprzecinkowy element div został usunięty z normalnego przepływu, element zewnętrzny div jest wypełniony, tak jakby wewnętrznego elementu div nie było. Jednak elementy wbudowane (obrazy, łącza, tekst, czarne cytaty) będą respektować granice elementu pływającego. Jeśli wprowadzisz tekst w div div, tekst zostanie umieszczony wokół div div.

Innymi słowy, elementy blokowe (nagłówki, akapity, div itp.) Ignorują elementy pływające i wypełniają je, a elementy wbudowane (obrazy, łącza, tekst itp.) Przestrzegają granic elementów pływających.

Przykład skrzypiec tutaj

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

Alejandro Ruiz Arias
źródło

3

Nie zaznaczaj tekstu i nie udostępniaj linków do skrzypiec, kodów pocztowych w swojej odpowiedzi od następnego razu, ponieważ jeśli skrzypce nie żyją, przyszły użytkownik nie otrzyma tutaj żadnej pomocy i twoja odpowiedź nie będzie miała znaczenia

Pan Alien

2

Spróbuj tego

.parent_div{
    display: flex;
}

Jusufbek
źródło

1

możesz użyć właściwości przepełnienia do div kontenera, jeśli nie masz div do wyświetlenia 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;
    }

Nishant Rana
źródło

Dlaczego wysokość elementu kontenera nie wzrasta, jeśli zawiera on elementy pływające?

Odpowiedzi:

Jak działa CSS Float?

Czym jest dokładnie float i co robi?

Przestaw także drugi element lub użyj „margin”