【清除浮动】clearfix:after清除浮动的新方法。

最新推荐文章于 2021-11-03 00:33:15 发布

转载最新推荐文章于 2021-11-03 00:33:15 发布 · 433 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shimily/articles/4347124.html

本文介绍了一种使用CSS的clearfix解决浮动元素导致父容器高度塌陷的问题。通过使用after伪元素，可以在父容器内部生成一个不可见的块级元素，从而达到清除浮动的效果。这种方法适用于所有现代浏览器，并提供了一个针对IE6的兼容性解决方案。

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

<div class="head clearfix"></div>     //只要写一个.clearfix就行了，然后在需要清浮动的元素中 添加clearfix类名就好了

解释：

在写HTML代码的时候，发现在Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。
这个clearfix的CSS使用了after这个伪对象，它将在应用clearfix的元素的结尾添加content中的内容。在这里添加了一个句号"."，并且把它的display设置成block；高度设为0；clear设为both；visibility设为隐藏。这样就达到了撑开容器的目的啦。


注释：
.clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容； 
content: "."; <----内容为“.”就是一个英文的句号而已。也可以不写。 
display: block; <----加入的这个元素转换为块级元素。 
clear: both; <----清除左右两边浮动。 
visibility: hidden; <----可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已； 
line-height: 0; <----行高为0； 
height: 0; <----高度为0； 
font-size:0; <----字体大小为0； 
} 
.clearfix{ *zoom:1;} 
<----这是针对于IE6的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。具体意思的
话，不用深究，听说微软的工程师自己都无法解释清楚。height:1%效果也是一样。

转载于:https://www.cnblogs.com/shimily/articles/4347124.html