div中的浮动元素，在div之外浮动。为什么？

正如卢卡斯所说，您所描述的是float属性的预期行为。令许多人感到困惑的是，为了弥补CSS布局模型中的缺陷，float已被远远超出了其最初的预期用途。

如果您想更好地了解此属性的工作原理，请查看Floatutorial。

谢谢LSerni，您为我解决了这个问题。

为达到这个 ：

+-----------------------------------------+
| +-------+                     +-------+ |
| | Text1 |                     | Text1 | |
| +-------+                     +-------+ |
|+----------------------------------------+

您必须这样做：

<div style="overflow:auto">
    <div style="display:inline-block;float:left"> Text1 </div>
    <div style="display:inline-block;float:right"> Text2 </div>
</div>

这是更现代的方法：

.parent {display: flow-root;} 

没有更多的clearfix。

ps使用溢出：隐藏；隐藏盒子阴影，以便...

在某些情况下，即当（如果）您只是要使float元素在同一“行”上流动时，可以使用

display: inline-block;

代替

float: left;

否则，clear即使最后需要使用元素来完成CSS应该做的事情，即使最后使用元素也可以。

没有什么丢失。Float是为希望将图像（例如）放置在文本的几段旁边而设计的，以便文本在图像周围流动。如果文本“拉伸”了容器，那将不会发生。您的第一段将结束，然后您的下一段将在图像下方开始（可能在下面几百个像素处）。

这就是为什么您得到自己的结果。

将您的内容div(s)放入a div并放入CSS中overflow:hidden;
，即可正常工作。

W3Schools建议：

放在overflow: auto父元素上，它将为整个背景（包括元素边距）“着色”。浮动元素也将留在边界内。

http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clearfix

最简单的方法是放在overflow:hidden父div上，而不指定高度：

#parent { overflow: hidden }

另一种方法是也浮动父div：

#parent { float: left; width: 100% }

另一种方法使用明确的元素：

<div class="parent">
   <img class="floated_child" src="..." />
   <span class="clear"></span>
</div>

的CSS

span.clear { clear: left; display: block; }