码迷,mamicode.com
首页 > Web开发 > 详细

CSS常用清除浮动方法总结

时间:2015-10-18 18:16:18      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:

1.对父元素使用overflow:hidden;zoom:1,或者是overflow:auto;zoom:1。

兼容性问题:该处使用zoom:1是为了兼容ie6,但是实际上,用height:1%;代替zoom:1;更好,因为它可以通过W3C。

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

2.在浮动元素后面添加新的元素,再使用clear:both。缺点:无意义的空标签,不利于语义化。

3.给浮动元素的父元素使用:after伪元素。如下:

 .outer{zoom:1;}

 .outer:after{

clear:both;

display:block;

content:".";

width:0;

height:0;

visibility:hidden;

其中content: ‘.‘; display:block;对于FF/chrome/opera/IE8不能缺少,其中content()可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它,但是不显示出来,这样才能实现清楚浮动。

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

 

关于zoom:1

zoom:1;属性是IE浏览器的专有属性,Firefox等其它浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等。
但很遗憾的是,它通不过W3C验证.

 

CSS常用清除浮动方法总结

标签:

原文地址:http://www.cnblogs.com/xmll/p/4889861.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!