Question

就像这样：

http://img815.imageshack.us/img815/2608/senzatitolo1c.png

使用此HTML：

<div style="border:1px solid">
   <img style="float:left"> text
</div>

Answer 1

将overflow: auto添加到容器中以包含图片;浮动将元素拉出流动。

Answer 2

你必须在最后清除浮动。（未经测试）

<div style="border:1px solid">
   <img style="float:left;" /> text
   <div style='clear:both;'></div>
</div>

Answer 3

标题： img with float：left不尊重容器

按照设计，它不应该尊重容器。根据下面解释的W3C规范，您的浮动元素不再处于正常内容流中。

但是，这里有两种常用方法可以强制父容器扩展到足以包含浮动内容。

方法＃1 （使用带有clear属性的空元素）：

<div style="border: 1px solid;">
   <img style="float: left;"> text
   <div style="clear: both;"></div>
</div>

方法＃2 （使用浮动元素父级的overflow属性）：

<div style="border: 1px solid; overflow: hidden;">
   <img style="float: left;"> text
</div>

使用方法＃2，在这种情况下，使用auto或hidden没有区别。没有任何东西会被剪裁，滚动条也不会出现，因为父母可以根据需要进行扩展。

W3C Spec: 9 Visual formatting model, 9.5 Floats

浮动是一个在当前向左或向右移动的框   线。浮动（或“浮动”或浮动）最有趣的特征   “浮动”框是指内容可以沿着它的边流动（或者是   禁止“清除”财产这样做。内容流下来   左侧浮动框的右侧，沿着左侧浮动框的右侧   右浮箱子。以下是float的介绍   定位和内容流;控制浮动行为的确切规则   在'float'属性的描述中给出。

浮动框向左或向右移动直到其外边缘   触摸包含块边缘或另一个浮动的外边缘。   如果有线框，则浮动框的外部顶部对齐   在当前行框的顶部。

如果浮子没有足够的水平空间，则移动   向下，直到它适合或没有更多的浮标存在。

由于浮动不在流中，因此创建了未定位的块框   在浮动箱垂直流动之前和之后，好像浮子没有   存在。但是，旁边创建的当前和后续行框   必要时缩短浮子以为边缘盒腾出空间   浮动。

以下是一大堆例子......

W3C Spec: 9 Visual formatting model, 9.8 Comparison of normal flow, floats, and absolute positioning

Answer 4

您需要在关闭div之前添加<div style="clear: left;"></div>。

<div style="border:1px solid">
   <img style="float:left"> text

   <div style="clear: left;"></div>
</div>

Answer 5

使用br添加任何元素（最常见的是div和style="clear: both;"）。

Answer 6

如果要确保浮动元素遵循其容器，则必须使用以下类型的代码：

<div style="border:1px solid">
   <img style="float:left"> text
   <div style="clear: both"></div>
</div>

Answer 7

将float：left添加到div。这将解决问题

<div style="border:1px solid;float:left">
   <img style="float:left" src=""> text
</div>

Answer 8

在容器的关闭标记之前添加<div style="clear: left;"></div>。

img with float：left不尊重容器？

8 个答案: