注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

独行冰海

不为明天而烦恼,不为昨天而叹息,只为今天更美好!——刘国利

 
 
 

日志

 
 
关于我

刘国利:白色,是我的世界的颜色,独特而隐逸。我的“自由”不单纯是不让别人决定我的人生,还是认识我的个性,维护我的个性,决定我生活目标的代名词,也从不以“地位”、“权力”为目标,只为了自己心底的梦、珍重的事、守护的情而奋斗。

网易考拉推荐

清浮动的几种方法—— WEB前端开发 网站制作 常见面试题  

2013-04-06 09:28:52|  分类: WEB-面试题 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
选择清浮动位置时应注意以下:1、清浮动一定要在浮动标签完成浮动布局以后添加,否则会影响到浮动标签布局;2、清除浮动必须与前面的标签属于同级关系。
①clear属性定义了元素某个方向上不允许出现浮动元素:none(允许两边都可以有浮动对象)/left(…)/right(不允许右边有浮动对象)/both(不允许有浮动对象);
②空标签清除浮动:在HTML页面中加入一个空标签用来清除浮动。
HTML:<div class="clear">&nbsp;</div>
CSS:.clear{clear:both;hegiht:0;overflow:hidden;}
clear:both;是清除所有浮动;height:0;overflow:hidden;是用来改变IE6下标签有默认的低于10px的行高时将以10px的高度显示的bug。
但是空标签清浮动会增加多余的代码。
③overflow:在需要清除浮动的腹肌标签中加入overflow即可,在IE6中不认识此属性则加入zoom:1;或者height:1%;css样式改为:.out{overflow:auto;zoom:1;}该属性对于父标签设置的高度小于子标签时,IE6/7、遨游则以下拉框形式出现,而火狐、谷歌、欧鹏、IE8会将子标签超出部分隐藏掉。
overflow:visible属性只能对IE6/7、遨游起作用,对火狐、谷歌、欧鹏、IE8无清浮作用。
overflow:visible(不剪切内容也不添加滚动条)/auto(是body对象和textarea的默认值,在需要时剪切内容并添加滚动条)/hidden(超出部分隐藏)/scroll(总是显示滚动条);
④after清浮动:css样式为:
.out{zoom:1;}/*==for IE6/7 Maxthon2==*/
 outer:after {clear:both;content:"";visible:hidden;display:block;}/*==for FF/chrome/opera/IE8==*/  
其中clear:both;只清除所有浮动;content:"";display:block;对于FF/chrome/opera/IE8不能缺少,content()可以取空值。
⑤子标签浮动时,给父标签浮动
⑥下一标签直接清浮动:兄弟标签浮动时,下一标签直接写入清除clear:both;就可以。
⑦使用position:absolute;清除浮动。

  评论这张
 
阅读(1527)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018