Jak sprawić, by div wzrastał, mając w środku elementy pływające

121

Jak sprawić, by element div zwiększył swoją wysokość, gdy ma w sobie unoszenie? Wiem, że zdefiniowanie wartości szerokości i ustawienie przepełnienia na ukryte działa. Problem w tym, że potrzebuję div z widocznym przepełnieniem. Jakieś pomysły?

css html overflow css-float pedrozath
źródło

Odpowiedzi:

278

overflow:auto;w zawierającym elemencie div sprawia, że ​​wszystko wewnątrz niego (nawet elementy pływające) jest widoczne, a zewnętrzny element div całkowicie otacza je. Zobacz ten przykład:

.wrap {
  padding: 1em;
  overflow: auto;
  background: silver;
 }
 
.float {
  float: left;
  width: 40%;
  background: white;
  margin: 0 1%;
}
<div class="wrap">
  <div class="float">Cras mattis iudicium purus sit amet fermentum. At nos hinc posthac, sitientis piros Afros. Qui ipsorum lingua Celtae, nostra Galli appellantur. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Ambitioni dedisse scripsisse iudicaretur.</div>
  <div class="float">Mercedem aut nummos unde unde extricat, amaras. A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod. Paullum deliquit, ponderibus modulisque suis ratio utitur.</div>
  </div>
Rozwiń fragment

JakeParis
źródło
7
Tak, to trochę działa, ale istnieje niebezpieczeństwo generowania pasków przewijania .. prawda?
pedrozath
1
Nie, nie żebym wiedział o @pedro. Zewnętrzny element div powinien po prostu rozszerzać się, aby zawijać wewnętrzne elementy div. spróbuj na skrzypcach, zwiększ wymiary wewnętrznych elementów div i zobacz, co się stanie.
JakeParis,
2
Wypróbowałem to i po prawej stronie okna przeglądarki pojawił się mały pasek przewijania o wysokości około 2 em.
Nigel Alderton
1
@NigelAlderton to działo się ze mną, ponieważ wymuszałem wysokość kontenera (tam, gdzie overflowzostał dodany). Naprawiono to przez usunięcie overflow: auto;z klasy, a także heightselektora
eggy
16

Istnieje więcej niż jeden sposób na wyczyszczenie pływaków. Możesz sprawdzić niektóre tutaj:
http://work.arounds.org/issue/3/clearing-floats/

Np. clear:bothMoże pracować dla Ciebie

#element:after {
    content:"";
    clear:both;
    display:block;
}

#element { zoom:1; }
Nikita Rybak
źródło
1
Zaletą tego podejścia jest overflow: auto;przycinanie treści (takich jak dekoracje fokusu), które wychodzą poza element, ale tak się nie stanie.
Dan
overflow: auto utworzyło dla mnie poziomy pasek przewijania, więc nie mogłem go użyć. To działało doskonale.
Edwin Stoteler
Dokładnie to, czego szukałem. Zastosowałem ten CSS do rodzica. Zwiększa wysokość elementu nadrzędnego <div>, tak że element pływający pozostaje w nim. Eleganckie, ponieważ wyraźnie stwierdza, że: „spód rodzica musi wyczyścić pływak”.
IAM_AL_X
12

W wielu przypadkach overflow: auto;to wystarczy, ale ze względu na ukończenie i obsługę wielu przeglądarek spójrz na Clearfix, który wykona zadanie dla wszystkich przeglądarek.

Rozważmy następujący znacznik.

<div class="clearfix">
   <div class="content">Content 1</div>
   <div class="content">Content 2</div>
</div>

Wraz z następującymi stylami.

.content { float:left; }

.clearfix { ..from link.. }

Bez wyraźnego poprawka rodzic divnie miałby wzrostu ze względu na pływające dzieci. Clearfix sprawi, że rodzic rozważy pływające dzieci.

miphe
źródło
2
Clearfix to dodatkowy znacznik. Po prostu daj rodzicowi div znacznikioverflow: auto;
JakeParis
7

Pomyślałem, że świetnym sposobem na zrobienie tego jest ustawienie display: tablena div.

pedrozath
źródło