问题的出现

我们前面所讲的装浮动的标准流大盒子，都是有高度的。在他的浮动子元素里，个数确不是一定以及子元素的高宽，在我们的开发中父盒子的高度是不确定的！！！，如果父盒子的大小自动浮动子元素的匹配就好了，现在浮现在我脑海里一句话就是，子盒子不是会撑开父盒子的大小吗，父盒子高度不给就好了？，但是事实不是这样的，

        <style>
                .box {
                        width: 600px;
                        background-color: bisque;
                        margin: 0 auto;
                        border: 1px solid black;
                }

                .one {
                        float: left;
                        width: 100px;
                        height: 100px;
                        border: 1px solid black;
                        background-color: palegreen;
                }

                .two {
                        float: left;
                        width: 100px;
                        height: 100px;
                        border: 1px solid black;
                        background-color: red;
                }
        </style>
        <div class="box">
                <div class="one"></div>
                <div class="two"></div>
        </div>

效果：

原因就是浮动元素不占位置，这样的话，下面的标准流盒子就会补上来，导致布局错乱。

清除浮动 clear

如果父盒子有高度就无需清除
清除浮动后，浮动的盒子就会占用原来的位置了，父盒子就会让自己的小盒子撑起来，这样我们就不用担心前面的问题了。
这个clear不是清除自己的浮动 而是清除旁边盒子的浮动不占位置的影响

clear : 值

值	描述
left	清除左侧有浮动的盒子的影响。
right	清除右侧有浮动的盒子的影响。
both	两侧都清除

我们经常使用 both值.

清除浮动的方法

额外标签法
给父元素加入 overflow: hidden;
:after 伪元素法(给父元素)
:after :before双伪元素清除

改装如下代码

        <style>
                .box {
                        width: 600px;
                        background-color: bisque;
                        margin: 0 auto;
                        border: 1px solid black;
                }

                .box1 {
                        width: 600px;
                        height: 300px;
                        background-color: pink;
                        margin: 0 auto;
                        border: 1px solid black;
                }

                .one {
                        float: left;
                        width: 100px;
                        height: 100px;
                        border: 1px solid black;
                        background-color: palegreen;
                }

                .two {
                        float: left;
                        width: 100px;
                        height: 100px;
                        border: 1px solid black;
                        background-color: red;
                }
        </style>
</head>

<body>
        <div class="box">
                <div class="one"></div>
                <div class="two"></div>
        </div>
        <div class="box1">我是后面的标准流盒子</div>
</body>

额外标签法

就是在我们浮动的盒子后面加一个具有clear属性的盒子，类似关门打狗一样。

        <div class="box">
                <div class="one"></div>
                <div class="two"></div>
                <!-- 加入额外的标签 -->
                <div style="clear:both"></div>
        </div>
        <div class="box1">我是后面的标准流盒子</div>

其实这个不算是很方便，每次清除浮动的时候还要加入一个行的毫无意义的标签。而且必须要求是块级元素不能是行内元素。

父元素加入 `overflow: hidden;`

overflow: hidden;

这个就十分方便了，但是也有缺点，就是无法显示溢出的部分 。

:after 伪元素

        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* 兼容IE6、7的版本  */
            *zoom: 1;
        }

这样的话，我们就可以给父元素加入一个class="clearfix"就好了,这个方法和前面的额外标签法本质上一样的,这个after帮我们在后面加入了个盒子。

优点就是没有加入新的盒子！！

:after :before双伪元素清除

只用after就挡住了后门，当然我们也可以挡住前门

        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

用法和前面的一致