设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 579|回复: 0

[其他] CSS清除浮动的三种方法

[复制链接]

374

主题

381

帖子

2554

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2554
发表于 2014-8-29 15:13:07 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
CSS清除浮动的三种方法

一、使用空标签清除浮动
  空标签可以是div标签,也可以是P标签。习惯用<div>,够简短也有很多人用<hr>,只是 需要另外为其清除边框,但理论上可以是任何标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清楚浮动,并为其定义CSS代 码:clear:both。此方法的弊端在于增加了无意义的结构元素。

二、使用overflow属性
  此种方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素(父级元素)中定义CSS属性:overflow:auto,即可!”zoom:1″用于兼容IE6。

三、使用after伪对象清楚浮动
  此种方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点:
      1)、该方法中必须为需要清除浮动元素的伪对象中设置height:0,否则该元素会比实际高出若干像素;
      2)、content属性是必须的,但其值可以为空,有的时候content的属性值可以设为”.”,但发现为空亦是可以的。
             .clearfix:after{display:block;clear:both;content:”";visibility:hidden;height:0;} .clearfix{*zoom:1;}
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-3 12:29

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表