读书人

关于float的懂得

发布时间: 2012-10-24 14:15:58 作者: rapoo

关于float的理解


假如不包含 <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规则。

更详细的了解:http://css-tricks.com/all-about-floats/

读书人网 >Web前端

热点推荐