css清除浮动clearfix:after

如果外部有一个div容器,内部div设置了float样式,则外部的容器div因为内部没有clear,导致不能撑开外部div

<div class="clearfix">
<div class="floated"></div>
</div>
.clearfix:after {
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的元素可以清除浮动来包裹内部元素。*/


     

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,786评论 1 92
  • 这篇文章极好,以至于让我受益良多,就一字没有改动的转发过来一丝冰凉老师的文章 需要注意的是,display:tab...
    新晋小牛牛阅读 1,069评论 0 2
  • @转自GitHub 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?(1)有两种, IE 盒子模...
    YT_Zou阅读 1,327评论 0 1
  • 今天晚,姊妹俩一直没说上一句。刚开始以为是像平时那样:她累了不想说话,只想静静。到后面,洗澡出来,她却自顾自翻冰箱...
    mak露相逢阅读 236评论 0 0
  • 始于心动,终于白首,拥之则安,伴之则暖。
    Mr双语主持人宇轩阅读 248评论 2 4