首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

关于float的懂得

2012-10-24 
关于float的理解假如不包含 div styleclear:both/div这段代码,那么外层的wrapper是不会包括里面的

关于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/

热点排行