CSS清除浮动CSS清除浮动
CSS
新建一个html文档,输入一下代码,你会发现float带来页面的种种问题。
*{margin:0;padding:0}
ul.nav{ background:red;list-style:none;}
ul.nav li{float:left; background:#FF9;margin:2px 5px}
p{background:blue;color:#FFF}
首页
我的日志
我的相册
我的心情
个人中心
这里不是导航的内容
如何解决以上问题呢?唯一的办...
CSS清除浮动
CSS
新建一个html文档,输入一下代码,你会发现float带来页面的种种问题。
这里不是导航的内容
如何解决以上问题呢?唯一的办法就是清除浮动。
3
1、 使用空标签清除浮动
在需要清楚浮动的层里边添加:
或者
ps:
也可以实现效果
2、 使用overflow属性
此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方
法是只需在需要清除浮动的元素中定义CSS属性:overflow:auto,即可!overflow:auto;
是让高度自适应, zoom:1;是为了兼容IE6,也可以用height:1%;的方式来解决,注意,zoom
不符合W3C标准。
Ps:overflow:hidden也可以实现
3、 使用after伪对象清除浮动
after伪对象非IE浏览器支持,所以并不影响到IE/WIN浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置
height:0,否则该元素会比实际高出若干像素;二、content属性是必须的,但其值可以为空,蓝色理想讨论该方法的时候content属性的值设为”.”,但我发现为空亦是可以的。
ul.nav:after{display:block;clear:both;content:"";visibility:hidden;height:0;}
清除浮动后效果如下:
使用一下代码清除浮动,屡试不爽。
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
.clearfix {display:block;}
本文档为【CSS清除浮动】,请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑,
图片更改请在作品中右键图片并更换,文字修改请直接点击文字进行修改,也可以新增和删除文档中的内容。
[版权声明] 本站所有资料为用户分享产生,若发现您的权利被侵害,请联系客服邮件isharekefu@iask.cn,我们尽快处理。
本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用。
网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。