怎么在CSS中使用overflow属性清除浮动

本篇文章为大家展示了怎么在CSS中使用overflow属性清除浮动,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

成都创新互联服务项目包括弋江网站建设、弋江网站制作、弋江网页制作以及弋江网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,弋江网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到弋江省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

overflow清除浮动以下面的XHTML代码为例:

XML/HTML Code复制内容到剪贴板

  1.   

  

  •   

  •   


    我以前用的方法是(CSS代码):

    CSS Code复制内容到剪贴板

    1. #container{   

    2. width:1000px;   

    3. overflow:hidden;   

    4. background:#999999;   

    5. }   

    6. #left{   

    7. width:70%;   

    8. height:500px;   

    9. float:left;   

    10. background:#ff0000;   

    11. }   

    12. #right{   

    13. width:28%;   

    14. height:500px;   

    15. float:rightright:   

    16. background:#0000ff;   

    17. }  

    这种方法有效的清除了浮动,但 IE6 里没有效果,所以为了兼容 IE6 ,需要为父元素设了一个宽度,并且是一个合适的宽度。

    再一种方法是把 overflow:hidden 换成 overflow:auto ,但 IE6 仍然没有效果,为了兼容 IE6 ,还是要做“手脚”,可以为父元素加上 height:1% 或 zoom:1 ,有人说 height:1% 应该写成 _height:1% ,但我并没有发现不加_符号有什么影响。而 zoom:1 则不能通过W3C验证。

    总结一下:清除浮动可以用 overflow:hidden 或 overflow:auto ,在比较标准的浏览器里没有问题,但 IE6 没有效果,为了兼容 IE6 ,可以为父元素:

    1、设置一个合适的宽度,但“合适的宽度”有的时候不好掌握;

    2、加上 height:1% ,什么都不用管,加上就有效,我还没有发现缺点;

    3、加上 zoom:1 ,不能通过W3C验证。

    上述内容就是怎么在CSS中使用overflow属性清除浮动,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。


    当前名称:怎么在CSS中使用overflow属性清除浮动
    链接分享:http://hbruida.cn/article/gjgigp.html

    其他资讯