有的朋友可能对于“元素浮动的问题 元素浮动的问题有哪些”还有很多不明白的地方，下面由77ISP云服务器技术小编为大家讲解一下，下面我们来一起看看吧！

子元素浮动会导致父元素盒子无法被撑开，导致父元素的样式无法显示，以下介绍几种清除浮动的方法

原代码：

    
        #content{
            border: 1px red solid;
        }
        .fl{
            border: 1px blueviolet solid;
            height: 100px;
            width: 100px;
            float: left;
        }
        .fr{
            border: 1px green solid;
            height: 200px;
            width: 200px;
            float: right;
        }
    

    
内容一
    
内容二

显示如下：

1、设置父元素高度：

height: 500px; /*设置父元素高度*/

    
    
    
        #content{
            border: 1px red solid;
            height: 500px; /*设置父元素高度*/
        }
        .fl{
            border: 1px blueviolet solid;
            height: 100px;
            width: 100px;
            float: left;
        }
        .fr{
            border: 1px green solid;
            height: 200px;
            width: 200px;
            float: right;
        }
    

    
内容一
    
内容二

2、父元素绝对定位：position:absolute;

    
        #content{
            border: 1px red solid;
            position: absolute; /*父元素绝对定位*/        }
        .fl{
            border: 1px blueviolet solid;
            height: 100px;
            width: 100px;
            float: left;
        }
        .fr{
            border: 1px green solid;
            height: 200px;
            width: 200px;
            float: right;
        }
    

    
内容一
    
内容二

3、父元素设置overflow：hidden

    
        #content{
            border: 1px red solid;
            overflow: hidden; 
        }
        .fl{
            border: 1px blueviolet solid;
            height: 100px;
            width: 100px;
            float: left;
        }
        .fr{
            border: 1px green solid;
            height: 200px;
            width: 200px;
            float: right;
        }
    

    
内容一
    
内容二

4、父元素设置浮动：float：left/right

    
        #content{
            border: 1px red solid;
            float: left; 
        }
        .fl{
            border: 1px blueviolet solid;
            height: 100px;
            width: 100px;
            float: left;
        }
        .fr{
            border: 1px green solid;
            height: 200px;
            width: 200px;
            float: right;
        }
    

    
内容一
    
内容二

5、在子元素最后添加一个空盒子，并设置样式为clear:both;

    
        #content{
            border: 1px red solid;
        }
        .fl{
            border: 1px blueviolet solid;
            height: 100px;
            width: 100px;
            float: left;
        }
        .fr{
            border: 1px green solid;
            height: 200px;
            width: 200px;
            float: right;
        }
       .clear{
            clear: both;
        } 
    

    
内容一
    
内容二
    

6、在父元素样式上添加一个伪类，相当于在子元素最后添加一个空盒子，原理与5类似

    
        #content{
            border: 1px red solid;
        }
        .fl{
            border: 1px blueviolet solid;
            height: 100px;
            width: 100px;
            float: left;
        }
        .fr{
            border: 1px green solid;
            height: 200px;
            width: 200px;
            float: right;
        }
        #content:after{
            content: '';
            display: block;
            /!*height: 0;*!/
            clear: both;
        }
    

    
内容一
    
内容二

以上就是“元素浮动的问题 元素浮动的问题有哪些”的详细内容，更多请关注77isp云服务器技术网其它相关文章！