清除网页代码浮动！

  清除代码浮动：

      为什么要清除浮动：由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度伟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)  编辑  收藏  举报