清除网页代码浮动!

  清除代码浮动:

      为什么要清除浮动:由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度伟0时,就会影响下面的标准流盒子。

       清除浮动的本质:清除浮动的本质是清除浮动元素造成对的影响。

        如果父盒子本身有高度,则不需要清除浮动

       清除浮动之后,父级就会根据浮动对的子盒子自动检测高度,父级就有了高度,就不会影响下面的标准流了。

      清除浮动的语法:{clear:属性值}

属性值 描述
left 不允许左侧有浮动元素【清除左侧浮动的影响】
right 不允许右侧有浮动元素【清除右侧浮动的影响】
both 同时清除左右两侧浮动的影响

 

 

 

 

 

     * 实际开发中,几乎只用【clear:both】 
     * 清除浮动的策略就是:闭合浮动

    清除浮动的方法:

      1.额外标签法也称为隔墙法,是w3推荐的做法

      2.父级添加 overflow 属性

      3.父级添加 after 伪元素

      4.父级添加双伪元素

      

     额外清除法:

                                     额外标签法会在浮动元素末尾添加一空的标签。例如:《div style=“clear:both”》《/div》,或者其他标签。

                                     优点:通俗易懂,书写方便

                                     缺点:添加许多无意义的标签,结构比较差。

    

    父级添加 overflow:

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

                                         优点:代码简洁

                                         缺点:无法显示溢出的部分。

     after伪元素:

                              :after方式是额外标签法的升级版,也是给父元素添加。

 

.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.cearfix{
/*IE6、7 专有*/
*zoom:1;
}

                      

                         优点:没有增加标签,结构更简单

                         缺点:照顾低版本浏览器

 

双伪元素清除浮动:

                                   也是给父元素添加

.clearfix:before,.clearfix:afte{
content:"";
display:table;
}
.clearfix:after {
clear:both
}
.clearfix {
*zoom:1;
}

                               

优点:没有增加标签,结构更简单

缺点:照顾低版本浏览器

                   

                          清除浮动总结:

                                                                        清除浮动的本质是:清除浮动元素脱离标准流造成的影响

                                                                        清除浮动的策略是:闭合浮动,只让浮动对在父盒子内部影响,不影响父盒子外面的其他盒子

                           为什么需要清除浮动:

                                                                                          1.父级没有高度。

                                                                                          2.子盒子浮动了

                                                                                          3.影响下面布局了。

                

         代码例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 1226px;
            height: 615px;
            background-color: pink;
            margin: 0 auto;

        }
        .left {
            width: 234px;
            height: 615px;
            background-color: purple;
            float: left;
        }
        .right {
            width: 992px;
            height: 615px;
            background-color: skyblue;
            float: right;
        }
        .right>div {
        width: 234px;
        height: 300px;
        background-color:pink;
        float: left;
        margin-left: 14px;
        margin-bottom: 14px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">小baby</div>
        <div class="right"><div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </div>
    </div>
</body>
</html>

 

posted @ 2022-11-06 02:44  ELiaukRain  阅读(46)  评论(0编辑  收藏  举报