div内浮动元素，div外浮动元素，为什么?

假设你有一个div，给它一个确定的宽度，并在其中放置元素，在我的例子中是img和另一个div。

这个想法是，容器div的内容将导致容器div伸展，并成为内容的背景。但当我这样做时，包含div的区域会缩小以适应非浮动对象，浮动对象会一直向外，或者一半向外，一半向内，并且与大div的大小没有任何关系。

为什么会这样?是否有我错过的东西，我如何才能得到浮动项目伸展的高度包含div?

当前回答

W3Schools推荐:

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

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

其他回答

W3Schools推荐:

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

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

以下是更现代的方法:

.parent {display: flow-root;}

不再有clearfix。

p.s. .使用overflow:隐藏;隐藏盒子阴影，所以…

最简单的方法是将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; }

把你的浮动div(s)在一个div和CSS给它overflow:hidden; 它会工作得很好。

什么都没少。Float是为这样的情况而设计的:例如，您想要一个图像(例如)位于几个文本段落旁边，因此文本围绕着图像流动。如果文本“拉伸”容器，就不会发生这种情况。你的第一段会结束，然后你的下一段会在图片下面开始(可能是下面几百个像素)。

这就是你得到这个结果的原因。

推荐文章