Html 图像左浮动超出div

我已经将文本和图像结合起来，但是猫离开了父分区。有什么方法可以修复它吗

---

一种不添加空元素的方法：

添加这个css

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

并将clearfix类添加到您的div中

<div style="border:1px solid #CCCCCC" class="clearfix">
    <img style="float: left;" src="http://placekitten.com/g/200/200" height="100px" width="100px" border="1px"/>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

</div>

将float:left添加到父div

或

将溢出：自动添加到父div

正确的方法是将溢出：隐藏添加到外部div的样式中。请参阅

---

当浮动元素时，您将它们从文档的原始流中取出

应用溢出：隐藏；到父元素是解决此问题的快速方法

请查看clearfix以了解更多信息：

请注意：

溢出：隐藏；还隐藏溢出，这在某些情况下可能是不受欢迎的行为

将此添加到文本后面

只需将position:absolute添加到div

<div style="border:1px solid #CCCCCC; position:absolute;">
    <img style="float: left" src="http://placekitten.com/g/200/200" height="100px" width="100px" border="1px"/>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</div>

---

不要添加额外的元素。有很多更好的方法可以达到同样的效果。然后是我的另一个错误定位divs@Ms.Nobody-因为这是一个重复的问题，我投票决定关闭这个问题，并将其标记为相同的问题。更好的答案和解决方案。因此，请投赞成票，我认为你错投了我的反对票：我没有足够的声誉投赞成票/反对票。。。

<div style="border:1px solid #CCCCCC; overflow: hidden">
    <img style="float: left;" src="http://placekitten.com/g/200/200" height="100px" width="100px" border="1px"/>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</div>

<div style="border:1px solid #CCCCCC; position:absolute;">
    <img style="float: left" src="http://placekitten.com/g/200/200" height="100px" width="100px" border="1px"/>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</div>