假设你有一个div,给它一个确定的宽度,并在其中放置元素,在我的例子中是img和另一个div。
这个想法是,容器div的内容将导致容器div伸展,并成为内容的背景。但当我这样做时,包含div的区域会缩小以适应非浮动对象,浮动对象会一直向外,或者一半向外,一半向内,并且与大div的大小没有任何关系。
为什么会这样?是否有我错过的东西,我如何才能得到浮动项目伸展的高度包含div?
假设你有一个div,给它一个确定的宽度,并在其中放置元素,在我的例子中是img和另一个div。
这个想法是,容器div的内容将导致容器div伸展,并成为内容的背景。但当我这样做时,包含div的区域会缩小以适应非浮动对象,浮动对象会一直向外,或者一半向外,一半向内,并且与大div的大小没有任何关系。
为什么会这样?是否有我错过的东西,我如何才能得到浮动项目伸展的高度包含div?
当前回答
正如Lucas所说,您所描述的是float属性的预期行为。让很多人感到困惑的是,为了弥补CSS布局模型中的缺点,float已经远远超出了它最初的预期用途。
如果你想更好地理解这个属性是如何工作的,可以看看Floatutorial。
其他回答
最简单的方法是将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; }
正如Lucas所说,您所描述的是float属性的预期行为。让很多人感到困惑的是,为了弥补CSS布局模型中的缺点,float已经远远超出了它最初的预期用途。
如果你想更好地理解这个属性是如何工作的,可以看看Floatutorial。
以下是更现代的方法:
.parent {display: flow-root;}
不再有clearfix。
p.s. .使用overflow:隐藏;隐藏盒子阴影,所以…
W3Schools推荐:
将overflow: auto放在父元素上,它将“着色”整个背景,包括元素边距。浮动元素也会留在边框内。
http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clearfix
你可以很容易地做,首先,你可以使div伸缩和应用右或左对齐内容,你的问题就解决了。
< span style=" font - family:宋体;"> < font-family:宋体;font-family:楷体;font-family:楷体;font-family:楷体;font-family:楷体;font-family:楷体;font-family:楷体;> < / >按钮感觉 < / div >