清除代码浮动：

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

原文地址：http://www.cnblogs.com/ELiaukRain/p/16861840.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性

清除网页代码浮动！