CSS——清除浮动

浮动的环境：当我们有一个大盒子（只设置了宽，没有设置高），里面嵌套着若干个小盒子，为了布局从左到右显示，都设置为浮动。再从外部加一个大盒子的时候，因为上面大盒子内部的子盒子是浮动的，所以它们都是不占位的，这时候大盒子会顶到上面的盒子的位置。

清除子盒子浮动：

1、clear: left | right | both（这个使用的时候别设置父元素的高。）

2、给父元素使用overflow:hidden，此时会产生BFC，也就是格式化上下文，会渲染出一个vip区域。（这个使用的时候别设置父元素的高。）

3、单伪元素标签法

4、双伪元素标签法

5、直接设置宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .header, .main, .footer {
             500px;
        }

        .header, .footer {
            height: 100px;
            background: #000;
        }

        .main {
            background: #eee;
            margin: 10px 0;
            /*overflow:hidden;*/
        }

        .content {
             300px;
            height: 300px;
            background: orange;
            float: left;
        }

        .sidebar {
             190px;
            height: 300px;
            background: green;
            float: right;
        }
        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            line-height: 0;
            visibility: hidden;
            clear: both;
        }
        /*兼容ie浏览器*/
        .clearfix {
            zoom: 1;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="main clearfix">
        <div class="content"></div>
        <div class="sidebar"></div>
        <!--消除浮动-->
        <!--<div style="clear:both"></div>-->
    </div>
    <div class="footer"></div>
</body>
</html>

双伪元素标签法：

<style type="text/css">
    .clearfix:before, .clearfix:after {
        content: "";
        display: table;
    }

    .clearfix:after {
        clear: both;
    }

    .clearfix {
        zoom: 1;
    }
</style>