首页 > web前端 > html教程 > CSS清浮动有哪些方法?

CSS清浮动有哪些方法?

零下一度
发布: 2017-06-30 10:47:13
原创
1410 人浏览过

浮动----会使当前标签产生上浮效果,从而导致父标签高度塌陷的问题

1. 给父元素指定高度

  

    

  

  简单粗暴!高度不定时,如果内部高度大于父级时,容易产生问题

2. 在浮动元素后边添加额外标签

  

     


     

  

  其他


标签也可以

  会产生空标签,导致代码混乱,不易维护,且代码的直观感觉很不好

3. 给父标签添加 overflow:hidden;zoom:1 或者 overflow:hidden;width:98% 样式

  

    

  

  添加 zoom:1 是为了兼容IE6,zoom 和 width 二者必有一个,但是不能设置height值,浏览器能够自动获取浮动区域高度,

  且不能与position一同使用,因为会引起超出尺寸的隐藏问题。

4. 给父标签设置 overflow:auto

  

    

  

  与 3 基本相同,只引起的问题是若内部高度高出父级时会出现滚轴

5. 给父元素添加浮动,大家一起变成一个整体的浮动块

  

    

  

  会引起新的浮动问题

6. 给父标签添加 display:table

  

    

  

   父级div属性变成表格,可能会引起其他位置问题

7. 给父标签添加绝对定位

  

    

  

  与 5 原理相通,都是将父元素脱离原始文本流,导致的问题也可能相似,可依旧使用该方法予以解决

8. 给父标签定义伪类 :after ,和zoom:1

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

  .clearfix {zoom:1}

  

    

  

  IE8以上和非IE浏览器才支持:after,zoom:1可解决浏览器兼容问题

 

以上是CSS清浮动有哪些方法?的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板