Родительский <div> не переносит дочерний элемент с атрибутом float

Посмотрите этот пример и объясните мне, почему зеленый <div> не обертывается вокруг оранжевого <div>.

<div id='green'>
  <div id="orange"></div>
</div>

#green{
    border: 20px solid #3D3;
}

#orange{
    width :100px;
    height: 100px;
    border: 10px solid orange;
    float: left;
}

Ответ 1

Попробуйте добавить float:left и display:block к внешнему div

см. обновленный пример - http://jsfiddle.net/jordanlewis/gDtSZ/1/

Ответ 2

Элементы не расширяются, чтобы содержать поплавок по умолчанию.

Существует несколько способов обхода, таких как плавающий родительский элемент, с помощью clearfix или добавление overflow: hidden к родительскому.

Лично я пытаюсь использовать последний.

Вот ваш рабочий стол jsFiddle.

Ответ 3

и если вы не хотите плавать свой внешний div слева, вы можете установить его на

display:table

это заставит внешний div обернуться вокруг внутреннего.

Ответ 4

<div id='green'>
  <div id="orange"></div>
  <div style="clear:both"></div>
</div>

Ответ 5

Зеленая рамка не является элементом с плавающей точкой.

Вам нужно либо очистить свой флоат после вложенного div, либо поплавать.

Ответ 6

вы можете просто добавить отображение: встроенный блок в оранжевую рамку.