Question

我已将文字与图片合并，但猫会离开父div。有没有办法解决它？

<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

<强> DEMO

或

将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

只需将位置：绝对添加到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>

Answer 5

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

应用overflow：hidden;到父元素可以快速解决这个问题。

请查看clearfix以获取更多信息：

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

请注意：

溢出：隐藏;也隐藏了溢出，这在某些情况下可能是不良行为。

Answer 6

在文字<div style="clear:both;"></div>

之后添加此内容

Demo

图像浮动离开了div

6 个答案: