Плавающие элементы в div, плавающие вне div. Зачем?

Скажите, что у вас есть div, скажем, вы окрашиваете его в зеленый цвет и придаете ему определенную ширину, когда я помещаю в него вещи, в моем случае img и другой div. Идея состоит в том, что содержимое контейнера div приведет к растягиванию контейнера div и станет фоном для содержимого. Но когда я это делаю, содержащий div сжимается, чтобы соответствовать неплавающим объектам, а плавающие объекты будут либо полностью, либо наполовину, наполовину внутри, и не имеют никакого отношения к размеру большого div.

Почему это? Есть что-то, что мне не хватает, и как я могу получить плавающие элементы, чтобы растянуть высоту содержащего div?

Ответ 1

Проще всего положить overflow:hidden в родительский div и не указывать высоту:

#parent { overflow: hidden }

Другой способ - также плавать родительский div:

#parent { float: left; width: 100% }

Другой способ использует чистый элемент:

<div class="parent">
   <img class="floated_child" src="..." />
   <span class="clear"></span>
</div>

CSS

span.clear { clear: left; display: block; }

Ответ 2

Причина

Проблема в том, что плавающие элементы вне потока:

Элемент вызывается из потока, если он плавает, абсолютно позиционируется или является корневым элементом.

Поэтому они не влияют на окружающие элементы, поскольку элемент в потоке будет.

Это объясняется в 9.5 поплавках:

Так как float не находится в потоке, создаются блоки с непозиционированными блоками до и после потока флоат-боксов вертикально, как если бы поплавок не существовать. Тем не менее, текущие и последующие строки строк, созданные рядом с поплавок сокращается по мере необходимости, чтобы освободить место для поля поля поплавка.

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-sibling {
  border: 3px solid green;
}
.block-sibling:after {
  content: 'Block sibling';
  color: green;
}
.float {
  float: left;
  border: 3px solid red;
  height: 90px;
  width: 150px;
  z-index: 1;
}
.float:after {
  content: 'Float';
  color: red;
}

<div class="float"></div>
<div class="block-sibling">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.
</div>

Ответ 3

Поместите ваш плавающий div(s) в div и в CSS дайте ему overflow:hidden;
он будет работать нормально.

Ответ 4

Там ничего не пропало. Float был разработан для случая, когда вы хотите, чтобы изображение (например) сидело рядом с несколькими абзацами текста, поэтому текст обтекает изображение. Этого не произойдет, если текст "растянет" контейнер. Ваш первый абзац закончится, а затем ваш следующий абзац начнется под изображением (возможно, несколько сотен пикселей ниже).

И вот почему вы получаете результат.

Ответ 5

В некоторых случаях, т.е. , когда (if) вы просто используете float, чтобы элементы перемещались по одной и той же строке, вы можете использовать

display: inline-block;

вместо

float: left;

В противном случае использование элемента clear в конце работы, даже если оно может пойти против зерна, нужно, чтобы элемент выполнял работу CSS.

Ответ 6

Как говорит Лукас, то, что вы описываете, - это предполагаемое поведение для свойства float. То, что сбивает с толку многих людей, заключается в том, что float был сильно вытеснен из-за своего первоначального предполагаемого использования, чтобы восполнить недостатки в модели макета CSS.

Посмотрите Floatutorial, если вы хотите лучше понять, как это свойство работает.

Ответ 7

Рекомендация W3Schools:

поместите overflow: auto в родительский элемент, и он будет "окрашивать" весь фон, включая поля элементов. Также плавающие элементы будут оставаться внутри границы.

http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clearfix

Ответ 8

Спасибо LSerni, вы решили это для меня.

Чтобы достичь этого:

+-----------------------------------------+
| +-------+                     +-------+ |
| | Text1 |                     | Text1 | |
| +-------+                     +-------+ |
|+----------------------------------------+

Вы должны сделать это:

<div style="overflow:auto">
    <div style="display:inline-block;float:left"> Text1 </div>
    <div style="display:inline-block;float:right"> Text2 </div>
</div>

Ответ 9

Здесь более современный подход:

.parent {display: flow-root;}

Больше никаких уточнений.

p.s. Использование переполнения: скрыто; скрывает тень окна... так же