Dlaczego ustawienie przepełnienia zmienia układ elementów potomnych?

Question

W tym question ktoś miał problem z układem, ponieważ miał dwa pływające elementy div wewnątrz niewolnego elementu div. Zasugerowałem dodanie float: left do ich zewnętrznego div, co rozwiązuje problem. Ktoś inny zasugerował dodanie overflow: hidden, co ku mojemu zaskoczeniu również zadziałało.

Nie wydaje się to wcale takie jak cel overflow: hidden. Wyraźnie przepełnienie: ukryte powoduje, że elementy inaczej postrzegają swoje dzieci. To, co naprawdę próbuję zrozumieć, to ta różnica. Intuicyjnie powinno to uczynić element mniejszym niż byłby w innym przypadku, nigdy większym i nie rozumiem, dlaczego miałoby to wpływ na hierarchię układu.

Czy ktoś może wyjaśnić, dlaczego to byłoby prawidłowe/konieczne zachowanie lub jeśli jest to tylko dziwactwo przeglądarki? Czy ich inny aspekt dotyczy przepełnienia, którego mi brakuje? Czy jakieś rozwiązanie jest lepsze od drugiego?

Edytuj: Odkryłem ustawienie overflow: auto również działa, więc nie wydaje się, że wartość przepełnienia jest ważna, tylko, że jest ustawiony. Wciąż nie rozumiem, dlaczego.

Answer 1

Przepełnienie czegokolwiek innego niż visible tworzy nowy kontekst formatowania bloków, który powoduje zawijanie elementów pływających. To standardowe zachowanie.

pływaków, całkowicie umieszczony elementów, inline bloki tabeli, komórki tabeli-tytuły i elementy z „nadmiaru” innych niż „widoczna” (z wyjątkiem, gdy wartość ta jest propagowane do viewport) ustanawiają nowe konteksty formatowania bloków.

W ramach bloku formatującym, skrzynki są ułożone jedna za drugą, pionie, poczynając od wierzchu zawierającego bloku. Pionowa odległość między dwoma siostrzanymi pudłami wynosi określona przez właściwości "marginesu". Marginesy pionowe między sąsiadującymi polami bloków w formatowaniu bloku zwijanie kontekstu.

W ramach bloku formatującym, lewa zewnętrzna krawędź każdego box dotyka lewy krawędzi bloku zawierającego (na formatowania od prawej do lewej, prawej krawędzi dotyku).Dzieje się tak nawet w obecności pływaków (choć pól liniowych pudełku może kurczyć ze względu na pływaków), chyba że pudełko ustanawia nowy kontekst formatowania blokowego (w którym sprawa sama skrzynka może stać węższy powodu pływaki).

Answer 2

Elementy pływające usuwają je z normalnego układu w wielu przypadkach. To nie jest dokładnie takie lub w przeciwieństwie do position: absolute; w tym. Elementy blokowe mają tendencję do ignorowania elementów pływających (w tym elementów bloków zawierających element), ale w odróżnieniu od elementów position: absolute;, elementy pływające są rozpoznawane i zawijane wokół elementów śródliniowych, takich jak tekst.

Posiadanie elementu do pakowania (div lub innego) również jest unoszone powoduje, że zachowuje się inaczej w porównaniu do pływających elementów, które zawiera. Ustawienie pozycji opakowania na overflow: hidden; zmusza ją do rozważenia elementów, które zawiera również w inny sposób. Przypuszczam, że to szczęśliwy zbieg okoliczności, że wynik końcowy wydaje się być taki sam. To nie dziwactwo czy błąd ... tylko jak to działa.