Question

我在另一个div中有一个左浮动的div，并且浮动的div内容已经离开了父级。

查看直播：

* {
  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

如果我能正确理解您的问题，您可以通过向ul li添加overflow:auto来解决问题。

Answer 2

我不确定这是否是您所需要的，但您可以为overflow:hidden添加ul li这将显示由li包裹的图片的div。

演示： http://jsfiddle.net/eWkUg/9/

Answer 3

浮动元素不会扩展其父级的高度。这会导致您看到的效果。

您必须在最后一个浮动元素后添加一个带有clear: left;的块级元素：

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

通常<br>用于此目的。

Answer 4

将布局更改为：

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

浮动元素后，它会从文档流中稍微移除，并且必须强制父容器延伸超过浮动元素的下限。你可以通过添加额外的行来做到这一点。

Answer 5

将clear:both添加到ul li：

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

http://jsfiddle.net/hAFWA/

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

5 个答案: