假设你有一个div，给它一个确定的宽度，并在其中放置元素，在我的例子中是img和另一个div。
这个想法是，容器div的内容将导致容器div伸展，并成为内容的背景。但当我这样做时，包含div的区域会缩小以适应非浮动对象，浮动对象会一直向外，或者一半向外，一半向内，并且与大div的大小没有任何关系。
为什么会这样?是否有我错过的东西，我如何才能得到浮动项目伸展的高度包含div?
当前回答
谢谢你，塞尔尼，你帮我解决了。
要做到这一点:
+-----------------------------------------+
| +-------+ +-------+ |
| | Text1 | | Text2 | |
| +-------+ +-------+ |
+-----------------------------------------+
你必须这样做:
<div style="overflow:auto">
<div style="display:inline-block;float:left"> Text1 </div>
<div style="display:inline-block;float:right"> Text2 </div>
</div>
其他回答
最简单的方法是将overflow:隐藏在父div中，并且不指定高度:
#parent { overflow: hidden }
另一种方法是浮动父div:
#parent { float: left; width: 100% }
另一种方法使用clear元素:
<div class="parent">
<img class="floated_child" src="..." />
<span class="clear"></span>
</div>
CSS
span.clear { clear: left; display: block; }
这里的其他解对我不起作用——我的元素一直被切断。但是如果其他人使用bootstrap来这里，它对我来说是有效的，我显式地将中介行div的x轴边距设置为零，并设置了justify-content-between:
<div class='container p-2'>
<div class='row mx-0 justify-content-between'>
<div class='float-left'></div>
<div class='float-right'></div>
</div>
</div>
什么都没少。Float是为这样的情况而设计的:例如，您想要一个图像(例如)位于几个文本段落旁边，因此文本围绕着图像流动。如果文本“拉伸”容器，就不会发生这种情况。你的第一段会结束，然后你的下一段会在图片下面开始(可能是下面几百个像素)。
这就是你得到这个结果的原因。
正如Lucas所说，您所描述的是float属性的预期行为。让很多人感到困惑的是，为了弥补CSS布局模型中的缺点，float已经远远超出了它最初的预期用途。
如果你想更好地理解这个属性是如何工作的，可以看看Floatutorial。
以下是更现代的方法:
.parent {display: flow-root;}
不再有clearfix。
p.s. .使用overflow:隐藏;隐藏盒子阴影，所以…
