清除浮动的几种方法

发布时间:2017-3-23 14:20:15 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"清除浮动的几种方法 ",主要涉及到清除浮动的几种方法 方面的内容,对于清除浮动的几种方法 感兴趣的同学可以参考一下。

清除浮动的几种方法

阅读张鑫旭的文章才明白:
     浮动的本来只是让文字环绕图片显示,其他所有用浮动实现的效果其实都不应是浮动应该做的事情,所以网页布局方面慎用float。具体前因后果我就不多说了,有兴趣的可以前往其博客:

http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%BA%8C/

我这边仅记录一下博客里面介绍的清除浮动的几种方法:

1. after + zoom 方法(通用性强,推荐)

.wrap{    zoom:1;}.wrap:after{    display: block;    content: 'clear';    clear: both;    line-height: 0;/*也可以写成heihgt: 0*/    visibility: hidden;}

2. overflow + zoom 方法:

.father{     overflow: hidden;     zoom: 1;}

涵盖所有浏览器,但是 overflow: hidden; 有隐患,如果里面的元素需要设置margin负值或是负的绝对定位,就会被隐藏掉。

 

3. 添加空标签(冗余空标签)

 

在最后一个子标签后面加一个 <div style="clear:both;"></div> 

 

4. 使用javascript改变css的属性:

obj.style.styleFloat = "left";/*IE*/ obj.style.cssFloat = "left";/*其他浏览器*/ 

上一篇:Http协议:彻底弄懂 Http 缓存机制 - 基于缓存策略三要素分解法
下一篇:简单的socket方法

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款