[总结六种清除css浮动的方法]总结六种清除CSS浮动的方法

更新时间:2019-11-01    来源:班主任工作总结    手机版     字体:

【www.bbyears.com--班主任工作总结】

1.父元素定义height



    
        鬼眼邪神的博客
    
    
        鬼眼邪神的博客
    


原理:手动定义父元素的高度,解决其不能自动获取高度的问题。

缺点:必须给出精确地高度,无法自适应。

2.利用空标签清浮动



    
        鬼眼邪神的博客
    
    
        鬼眼邪神的博客
    
    
    
    



原理:在父元素的关标签之前加入一空标签,用clear:both来清浮动。

缺点:如果需要清浮动的地方很多,则需要加入很多空标签,很麻烦。

3.父元素设置overflow:hidden



    
        鬼眼邪神的博客
    
    
        鬼眼邪神的博客
    



原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden具有清除内部浮动的效果。

缺点:当与position配合使用时,有可能会造成内容被隐藏。

4.父元素定义伪类:after



    
        鬼眼邪神的博客,地址
    
    
        鬼眼邪神的博客,地址
    



原理:使用:after伪类在浮动块后面加上一个非display:none的不可见块状内容来,并给它设置clear:both来清理浮动。

5.父元素定义overflow:auto



    
        鬼眼邪神的博客
    
    
        鬼眼邪神的博客
    



原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度

缺点:内容超出父元素宽高时会出现滚动条。

6.父元素设置float属性



    
        鬼眼邪神的博客
    
    
        鬼眼邪神的博客
    

本文来源:http://www.bbyears.com/banzhurengongzuo/76742.html

热门标签

更多>>

本类排行