Плавающий элемент попадает за пределы своего родителя?

Question

У меня есть div с плавающим слева элементом в другом div, и содержимое плавающего div выходит из родительского элемента.

Смотрите вживую:

http://jsfiddle.net/eWkUg/

* {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul {
  width: 600px;
}
ul li {
  border: solid 1px #000;
  margin: 15px 0;
}
.img-section {
  float: left;
  border: solid 1px red;
}

<ul>
  <li>
    <div class="img-section">
      <img src="http://www.placehold.it/50X100">
    </div>
     Hello world
  </li>
  <li>
    How to avoid the red box getting out of the black one? (and hiding another list element)
  </li>
</ul>

Я пытался ясно: влево / вправо / в оба, но ничего не помогает.

Как этого избежать? У меня есть плавающий весь div (не содержимое) из-за наложения изображения (не включенного в пример выше)

Answer 1

Вы можете исправить это, добавив overflow:auto к ul li, если я правильно понимаю вашу проблему.

Answer 2

Плавающие элементы не увеличивают высоту своих родителей. Это вызывает эффект, который вы видите.

Вы должны добавить элемент уровня блока с clear: left; после последнего плавающего элемента:

<li>
    <div class="img-section"><img /></div>
    <div class="text-section">...</div>
    <br style="clear: left;" />
</li>

Обычно для этой цели используется <br>.

Answer 3

Я не уверен, что это то, что вам нужно, но вы можете добавить overflow:hidden для ul li, это покажет div изображения, завернутый в li.

Демо: http://jsfiddle.net/eWkUg/9/

Answer 4

Добавить clear:both к ul li:

ul li {
    border: solid 1px #000;
    margin: 15px 0;
    clear:both;
}

http://jsfiddle.net/hAFWA/

Answer 5

Изменить макет на:

<ul>
    <li>
       <div class="img-section">...</div>
       <div class="text-section">...</div>
       <br style="clear:left" /> <<---- add this 
    </li>
    etc...

Когда вы перемещаете элемент, он несколько удаляется из потока документов, и вы должны заставить родительский контейнер расширяться за нижний предел перемещаемого элемента. Вы делаете это, добавляя эту дополнительную
строку.