div内的浮动元素浮动在div外。 为什么？
假如你有一个div，比如说把它打成绿色，给它一个确定的宽度，当我把东西放在里面的时候，在我的情况下是img和另一个div。 这个想法是，容器div的内容将导致容器div伸出，并成为内容的背景。 但是当我这样做的时候，包含的div会缩小以适应非浮动的对象，浮动的对象将会是完整的，半出来的，一半的，并不会影响到大div的大小。
为什么是这样？ 有什么我失踪了，我怎么能得到浮动项目伸出一个包含div的高度？
最简单的就是把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; }
原因
问题在于浮动元素不在stream动中 ：
如果元素是浮动的，绝对定位的或者是根元素，则称该元素为stream出 。
因此，它们不会像stream入式元素那样影响周围的元素。
这在9.5中进行了解释Floats ：
由于浮动不在stream中，所以在浮动框之前和之后创build的非定位块框垂直stream动，就好像浮动不存在一样。 然而，根据需要缩短在浮动物旁边创build的当前和随后的线框，以便为浮动物的边距框腾出空间。
html { width: 550px; border: 1px solid; } body { font-family: sans-serif; color: rgba(0,0,0,.15); } body:after { content: ''; display: block; clear: both; } div { position: relative; } div:after { font-size: 200%; position: absolute; left: 0; right: 0; top: 0; text-align: center; } .block-sibling { border: 3px solid green; } .block-sibling:after { content: 'Block sibling'; color: green; } .float { float: left; border: 3px solid red; height: 90px; width: 150px; z-index: 1; } .float:after { content: 'Float'; color: red; }
<div class="float"></div> <div class="block-sibling"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. </div>
把你的浮动div(s)在一个div和CSS给它overflow:hidden;
它会正常工作。
没有什么缺失。 浮动是为了这样的情况，你想要一个图像（例如）坐在旁边的几段文字的情况下，所以文字stream动的图像。 如果文本“拉伸”容器，则不会发生这种情况。 您的第一段将结束，然后您的下一段将在图像下开始（可能在几百像素以下）。
这就是为什么你得到了你的结果。
在某些情况下，也就是说， 如果（如果）只是使用float来使元素在同一“行”上stream动，则可以使用
display: inline-block;
代替
float: left;
否则，在最后使用一个clear元素，即使它可能违背了谷物需要一个元素做CSS应该做的工作。
正如卢卡斯所说，你所描述的是浮动财产的预期行为。 令许多人感到困惑的是，为了弥补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>
W3School推荐：
将overflow: auto放在父元素上，它将“包括元素边距”在内的整个背景“着色”。 浮动元素也会留在边界内。
http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clearfix
