CSS中FLOAT闭合问题(clearing float)
2014-04-01 20:30:50   来源:   评论:0 点击:

网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合,这也是div无法自适应高度的一个原因。如果父div没有设float而
网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合,这也是div无法自适应高度的一个原因。如果父div没有设float而其子div却设了float的话,父div无法包住整个子DIV,这种情况一般出现在一个父DIV下包含多个子DIV。
解决办法:
1、给父DIV也设上float,
2、在所有子DIV后新加一个空DIV空隙)
 
比如:
.parent{width:100px;}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
.clear{clear:both;margin:0;parding0;height:0px;font-size:0px;}
〈div class="parent"〉
  〈div class="son1"〉〈/div〉
  〈div class="son2"〉〈/div〉
  〈div class="clear"〉〈/div〉
〈/div〉
 
3、万能 float 闭合
将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix”即可。代码:
〈style〉
/* Clear Fix */
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix {display:inline-block;}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
〈/style〉
:after(伪对象),设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie 浏览器支持,所以并不影响到IE/WIN浏览器。这种的最麻烦。
 
4、overflow:auto 只要在父DIV的CSS中加上overflow:auto就搞定。举例:
.parent{width:100px;overflow:auto}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
〈div class="parent"〉
  〈div class="son1"〉〈/div〉
  〈div class="son2"〉〈/div〉
〈/div〉
 
外围元素之所以不能很好的延伸,问题出在了overflow上,因为overflow不可见(见W3C的解释)。现在只要将给外围元素添 加一个“overflow:auto”,就可以解决问题,结果是除了IE,真的可以解决。下来就要解决IE的问题了,再加上“_height:1%”,这个问题就完全解决了。其实这里不加"_height:1%“在IE下也行。

相关热词搜索:

上一篇:IE专用的条件注释大汇总
下一篇:浏览器兼容问题--css filter的办法