CSS:清除浮动(额外标签法、父级添加overflow、伪元素法、双伪元素法)

时间:2020-06-19 23:12:00 来源:互联网 作者: 神秘的大神 字体:

1、清除浮动的原因

(1)不清除浮动的情况:

由于父级的子元素不方便给高度(不给高度的时候父盒子的大小由里面包含的子盒子来决定),但是,子元素为浮动的又不占有位置,导致父级的盒子高度为0的时候就会影响下面的标准流的盒子。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .bigbox {
                background-color: #ffffcc;
                width: 1100px;
                margin: 0 auto;
            }
            .left{
                height: 400px;
                width: 200px;
                float: left;
                background-color: blanchedalmond;
            }
             .right{
                height: 400px;
                width: 600px;
                float: right;
                background-color: #e3dc89;
            }
            .test{
                height: 100px;
                width: 1000px;
                margin: 0 auto;
                background-color: black;
            }
        </style>
    </head>

    <body>
        <div class="bigbox">
            <div class="left"></div>
            <div class="left"></div>
            <div class="left"></div>
            <div class="left"></div>
            <div class="left"></div>
        
        </div>
        <div class="test">
            
        </div>
    </body>

</html>

 

 

 由于浮动元素不占有原来的文档流的位置,因此会对后面的元素的布局产生影响。

(2)需要清除浮动的情况

父级没有高度

子盒子浮动了

影响下面的布局了

 

2、浮动的清除

(1)属性值(clear)

right:清除左侧有浮动的元素

left:清除右侧有浮动的元素

both:左右侧都清除

(2)额外标签法:

也称为隔墙法,会在浮动元素的末尾添加一个空标签(必须是块元素),例如:<div style="clear: both"></div>或者其他标签,例如:<br>等

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .bigbox {
                background-color: #ffffcc;
                width: 1100px;
                margin: 0 auto;
            }
            .left{
                height: 400px;
                width: 200px;
                float: left;
                background-color: blanchedalmond;
            }
             .right{
                height: 400px;
                width: 600px;
                float: right;
                background-color: #e3dc89;
            }
            .test{
                height: 100px;
                width: 1000px;
                margin: 0 auto;
                background-color: black;
            }
            .clear{ clear: both; } </style>
    </head>

    <body>
        <div class="bigbox">
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="clear">
                
            </div>
        
        </div>
        <div class="test"></div>
    </body>

</html>

 

 

 此时,父盒子的高度会随子盒子的多少而改变,并且不会影响后面的布局。

(3)父级添加(添加overflow)

可以给父级元素添加overflow属性,将其属性值设置为hidden、auto或scroll

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .bigbox {
                overflow: hidden;
                background-color: #ffffcc;
                width: 1100px;
                margin: 0 auto;
            }
            .left{
                height: 400px;
                width: 200px;
                float: left;
                background-color: blanchedalmond;
            }
             .right{
                height: 400px;
                width: 600px;
                float: right;
                background-color: #e3dc89;
            }
            .test{
                height: 100px;
                width: 1000px;
                margin: 0 auto;
                background-color: black;
            }
        </style>
    </head>

    <body>
        <div class="bigbox">
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>    
        </div>
        <div class="test"></div>
    </body>

</html>

 

 

 (4)伪元素法:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .bigbox {
                background-color: #ffffcc;
                width: 1100px;
                margin: 0 auto;
            }
            .left{
                height: 400px;
                width: 200px;
                float: left;
                background-color: blanchedalmond;
            }
             .right{
                height: 400px;
                width: 600px;
                float: right;
                background-color: #e3dc89;
            }
            .test{
                height: 100px;
                width: 1000px;
                margin: 0 auto;
                background-color: black;
            }
            .clearfix:after{
                content: "";
                display: block;
                height: 0px;
                clear: both;
                visibility: hidden;
            }
            .clearfix{/*IE6\7专有*/
                *zoom: 1;
            }
        </style>
    </head>

    <body>
        <div class="bigbox clearfix">
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>    
        </div>
        <div class="test"></div>
    </body>

</html>

 

 

 (5)双伪元素清除浮动(使用了before和after来清除浮动):

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .bigbox {
                background-color: #ffffcc;
                width: 1100px;
                margin: 0 auto;
            }
            .left{
                height: 400px;
                width: 200px;
                float: left;
                background-color: blanchedalmond;
            }
             .right{
                height: 400px;
                width: 600px;
                float: right;
                background-color: #e3dc89;
            }
            .test{
                height: 100px;
                width: 1000px;
                margin: 0 auto;
                background-color: black;
            }
            .clearfix:before,.clearfix:after{
                content: "";
                display: table;
            }
            .clearfix:after{
                clear: both;
            }
            .clearfix{
                *zoom: 1;
            }
        </style>
    </head>

    <body>
        <div class="bigbox clearfix">
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>
            <div class="left">子元素</div>    
        </div>
        <div class="test"></div>
    </body>

</html>