Css 浮动元素是否在其父元素之外？

我在另一个div中有一个左浮动div，浮动div的内容正在从父div中移出

见现场直播：

*{
保证金：0；
填充：0；
列表样式：无；
}
保险商实验室{
宽度：600px；
}
ulli{
边框：实心1px#000；
利润率：15px0；
}
.img组{
浮动：左；
边框：实心1px红色；
}

你好，世界


如何避免红色盒子脱离黑色盒子？（并隐藏另一个列表元素）

我不确定这是否是您所需要的，但是您可以为

ul li

添加

溢出：隐藏
，这将显示由
li
包裹的图像的div

演示：
如果我正确理解您的问题，您可以通过添加到
ul li
来修复它。
浮动元素不会扩展其父元素的高度。这会导致您看到的效果

必须添加块级元素，且
clear:left在最后一个浮动元素之后：

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


...




通常使用

来实现此目的。
将布局更改为：

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



...
...

向ul li添加
clear:both
：

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

您想限制内部div的高度，还是主div应该相应地延伸到内部内容？

是一种老式的方法，没有语义，这很有趣。为什么
overflow:hidden
会影响这一点？@Tomalak这篇文章阐明了这个主题，并给出了一些答案：）@Tomalak：如果你仔细想想，浏览器必须计算元素的高度才能处理任何（潜在的）溢出。@reisio:这难道不会有潜在的负面影响，比如，实际上是无意中隐藏了内容？@Tomalak是的。但是
overflow:auto
或
overflow:scroll
具有相同的效果，因此您只需选择更适合的选项。我比Sotiris的答案更喜欢这个选项，因为它使用“auto”而不是“hidden”。使用“隐藏”可能会让您不知道在处理边距、填充、宽度等方面可能存在的其他问题。。“hidden”值也有类似于这样的浮动容器的位置，但我将以“auto”开头。它不能解决这个问题，也不能解决所有问题。