本页二维码,扫一扫分享到朋友圈
朋友圈

css清除浮动解决方案


阅读170 评论0 赞 47返回首页    go 编程与技术  go css


前言

偶然看到一篇文章,发现自己和所在项目清除浮动的方式以及落伍,特此整理。


空标签大法

按照方法从旧到新的顺序来说,最老的应该就是空标签大法了,通过给空标签添加css:

1

.clear{clear:both;line-height:0;}

来清除浮动。这种做法如果在页面复杂的布局要经常清楚浮动的时候就会产生很多的空标签,增加了页面无用标签,不利于页面优化。


after大法

后来出现了利用after伪元素的方式:

1

2

3

4

5

6

7

8

9

10

.clearfix:after {

visibility: hidden;

display: block;

font-size: 0;

content: " ";

clear: both;

height: 0;

}

.clearfix{*zoom:1;}


优化after

上面的方法还是太麻烦了,有人推出更简便的方法:

1

2

3

4

5

6

7

.clearfix:after {

content:"200B";

display:block;

height:0;

clear:both;

}

.clearfix {*zoom:1;}/*IE/7/6*/

这里的200B,是一个零宽度空格,这样就不用visibility:hidden了。


极精简法

还有一种极度精简法:

1

2

3

4

5

6

7

8

.clearfix:before,.clearfix:after{

content:"";

display:table;

}

.clearfix:after{clear:both;}

.clearfix{

*zoom:1;/*IE/7/6*/

}

后面说到的两种方法都比较精简,可以用在项目工程中。


感悟

想起老师和我说过一句话,css是一笔一笔画出来的。唉…


  上一篇:go css background属性详解
  下一篇:go CSS中的ID和CLASS命名参考


评论


用QQ登录管理/创建网站 用微博登录管理/创建网站   发布于:11-19