html - 左边的图像浮动超出了div

Question

我已经将文本与图像组合在一起，但是猫会离开父 div。有什么办法可以解决吗？

http://jsfiddle.net/qn5LM/

<div style="border:1px solid #CCCCCC">
    <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>

Answer 1

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

添加这个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>

http://jsfiddle.net/qn5LM/11/

Answer 2

也添加float:left到父 div

演示

或者

添加overflow:auto到父 div

Answer 3

正确的做法是添加overflow: hidden到outer-div的样式中。见jsFiddle

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

Answer 4

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

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

请查看 clearfix 了解更多信息：

http://css-tricks.com/snippets/css/clear-fix/

请注意：

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

Answer 5

在文本之后添加这个<div style="clear:both;"></div>

演示

Answer 6

只需将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>