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

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

【转载】如何清除浮动?  

2015-01-27 18:56:30|  分类: HTML&&CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自独行冰海《如何清除浮动?》

如何清除浮动

在前面的《浮动元素有何性质》《为何要闭合浮动》这两篇博文中,我们进行了详细的浮动元素特点以及清除浮动的必要性。今天我们来探讨一下,具体清除浮动可以采用哪些方法。最佳的选择方案是after伪元素清浮动。也是个人比较推荐的,具体如下。

 

空标签清除浮动

.clear{clear : both;}

优点:通俗易懂,容易掌握。

缺点:会添加大量无语义空标签,结构与表现未分离,不利于维护。

 

br标签清除浮动

优点:比空标签方式语义稍强,代码量较少。

缺点:结构与表现未分离,不推荐。

 

父元素设置 overflow : hidden

优点:不存在结构和语义化问题,代码量少。

缺点:内容增多时候容易造成不会自动换行,导致内容被隐藏,无法显示需要溢出的元素。

IE6需要触发haslayout。

 

父元素设置 overflow : auto

优点:不存在结构和语义化问题,代码量少。

缺点:多个嵌套后,FF某些情况会造成内容全选;IE中mouseover造成宽度改变时会出现最外层模块出现滚动条。

IE6需要触发haslayout。

 

父元素浮动

优点:不存在结构和语义化问题,代码量少。

缺点:使得与父元素相邻的元素的布局会受到影响,不可能一直浮动到body,不推荐。

 

父元素设置display:table

优点:结构语义化完全正确,代码量少。

缺点:盒模型属性已经改变,不推荐使用。

 

使用:after 伪元素(不是伪类)

优点:结构和语义化完全正确,代码量居中。

缺点:复用方式不当会造成代码量增加。

由于IE6-7不支持:after,使用zoom:1触发hasLayout

  1. .clearfix:after {content:"\200B"; display:block; height:0; clear:both; }
  2. .clearfix { *zoom:1; }

1)display:block 使生成的元素以块级元素显示,占满剩余空间;

2)height:0 避免生成内容破坏原有布局的高度。

3)Unicode字符里有一个“零宽度空格”,也就是U+200B

,这个字符本身是不可见的,所以我们完全可以省略掉visibility:hidden

4)zoom:1 触发IE hasLayout。

 

欢迎大家互相学习交流。独行冰海


欢迎学习交流-----梦幻雪冰

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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