浮动元素是否超出其父级？

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.