Jak zrobić div wzrost wysokości mając pływaki wewnątrz

Jak sprawić, by div urósł, gdy ma pływaki w środku? Wiem, że definiowanie wartości dla szerokości i ustawianie przepełnienia na Ukryte działa. Problem w tym, że potrzebuję div z widocznym przepełnieniem. Jakieś pomysły?

Author: Pops, 2011-01-05
Source

4 answers

overflow:auto; na zawierającym div sprawia, że wszystko wewnątrz niego (nawet pływające przedmioty) widoczne, a zewnętrzny div w pełni owija się wokół nich. 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>
 251
Author: JakeParis,
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-06-20 14:05:27

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

Np., clear:both może pracować dla ciebie 

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

#element { zoom:1; }
 12
Author: Nikita Rybak,
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
2011-01-05 12:34:52

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

Rozważmy następujące znaczniki..

<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 clearfix, rodzic div nie miałby wzrostu z powodu pływających dzieci. Clearfix sprawi, że rodzic rozważy pływające dzieci.

 11
Author: miphe,
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-09-24 06:18:13

Pomyślałem, że świetnym sposobem na to jest ustawienie display: table Na div.

 7
Author: pedrozath,
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-01-07 22:56:05