css清除浮动

写css 时总为浮动而烦恼,如果用了浮动,浮动的父层不会跟着浮动框的高度增加而增加,在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。这个时候我们可以用clearfix清除浮动

代码

.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的元素可以清除浮动来包裹内部元素。*/
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(flo...
    秦至阅读 3,110评论 1 8
  • 在CSS布局中float属性经常会被用到,但使用float属性后会使其在普通流中脱离父容器,让人很苦恼。 浮动带来...
    wmsj100阅读 4,314评论 0 1
  • 如果外部有一个div容器,内部div设置了float样式,则外部的容器div因为内部没有clear,导致不能撑开外...
    嗯哼26阅读 3,841评论 0 0
  • 茶叶市场上茶馆品牌店,茶馆加盟店也不少,市场的竞争力也就更大,因此我们茶馆加盟店要想更好的发展下去,就要提高茶馆加...
    3941f9c0d31b阅读 2,669评论 0 1

友情链接更多精彩内容