div.collapse{
width:100px;
height:100px;
padding:5px;
/*margin:10px;*/
background-color:lightblue;
border:1px solid #a9a9a9;
}
<div id="wrapper" style="background:pink;">
<div class="collapse" style="float:left;">content
</div>
<div class="collapse" style="float:left;">
</div>
<div style="clear:both"></div>
</div>
假如不包含 <div style="clear:both"></div>这段代码,那么外层的wrapper是不会包括
里面的两个的浮动DIV的。
方法二:为父元素设置overflow属性,值为auto或hidden;
方法三:为父元素添加以下CSS规则:
#wrapper:after{
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
方法四:父元素本身设置为float(这会影响它周边的元素)
原因:float元素是脱离了页面的正常布局,定义了float以后,它将不再占用原有的位置。
因此,如果上面的第二个div不设置float,第二个div将占据第一个div的位置,从而被第一个div遮盖住了。
float带来的问题还有:
1.如果div的设置了宽度,而内容超出它的范围的话,内容就会溢出,但并不会影响到周围元素的布局。
2.对于IE6,上面第一个DIV距离左边界会是20px,原因是DIV1与DIV2都在同一个方向设置了float属性(left),因此
存在double margin bug.解决方法是对第一个div设置 display:inline规则。
更详细的了解:[url]http://css-tricks.com/all-about-floats/[/url]