Как сделать div расти в высоту, имея плавает внутри

Question

Как сделать div расти в высоту, имея плавает внутри

Как я могу заставить div расти в высоту, когда он плавает внутри него? Я знаю, что определение значения ширины и установка переполнения на скрытые работы. Проблема в том, что мне нужен div с заметным переливом. Есть идеи?

534 4

html css css-float overflow

4 ответов:

Comments

Ничего не найдено.

JakeParis · Accepted Answer · 2018-06-20 17:05:27

overflow:auto; на содержащем div делает все внутри него (даже плавающие элементы) видимым, а внешний div полностью обертывает их. См. этот пример:

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

Nikita Rybak · Accepted Answer · 2011-01-05 14:34:52

есть более чем один способ очистить поплавки. Вы можете проверить здесь:
http://work.arounds.org/issue/3/clearing-floats/

например,clear:both может сработать для вас
#element:after {
    content:"";
    clear:both;
    display:block;
}

#element { zoom:1; }

miphe · Accepted Answer · 2015-09-24 09:18:13

во многих случаях overflow: auto; будет достаточно, но ради завершения и кроссбраузерной поддержки, взгляните на Clearfix который будет выполнять эту работу для всех браузеров.

рассмотрим следующую разметку..
<div class="clearfix">
   <div class="content">Content 1</div>
   <div class="content">Content 2</div>
</div>
наряду со следующими стилями..

.content { float:left; }

.clearfix { ..from link.. }

без clearfix, родитель div не было бы высоты из-за его плавающих детей. В clearfix сделает родитель рассматривает плавающих детей.

pedrozath · Accepted Answer · 2018-01-08 00:56:05

Я понял, что лучший способ сделать это задание display: table на div.