浮动元素超出其父级？ [英] Floated element gets outside of its parent?

问题描述

我有一个左浮动div在另一个div和浮动的divs内容正在离开父母。

I have an left floated div in another div and the floated divs content is getting out of the parent.

查看生活：

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>

我一直在尝试清除：左/右/两者，但没有任何帮助。

I've been trying clear: left/right/both, but nothing helps.

如何避免这种情况？由于图片重叠（不包括在上面的示例中），我需要浮动整个div（而不是内容）。

How to avoid this? I HAVE to float the whole div (not the contents) due to image overlay (not included in example above)

推荐答案

通过将 overflow：auto 添加到 ul li ，如果我正确理解你的问题。

You can fix it by adding overflow:auto to ul li, if I understand your problem correctly.

这篇关于浮动元素超出其父级？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！