关于浮动与清除浮动

父亲：粉色div盒子
儿子1：紫色box1
儿子2：橙色box2

1.不浮动

html:

<div class="box">
  <div class="box1">BOX1</div>
  <div class="box2">BOX2</div>
</div>

css:

<style>
    .box {     /*父亲*/
        width: 600px;
        background-color: pink;
    }    
    .box1 {   /*儿子1*/
        width: 200px;
        height: 200px;
        background-color: #c8addd;
    }    
    .box2 {    /*儿子2*/
        width: 200px;
        height: 200px;
        background-color: #ee9d7e;
    }
</style>

2.浮动

儿子1左浮动，儿子2右浮动。会发现粉色的父亲没有了。是因为父亲没有高，浮动的儿子是不能撑开没有高度的父亲，导致粉色的父亲消失。怎么解决呢？所以我们要清除浮动。

3.清除浮动

给父亲清除浮动后粉色父亲就被撑出高度就显示了。并且父亲的兄弟也不会受到浮动的影响。

overflow:hidden;/*本意是溢出隐藏，即清除溢出到盒子外面的文字*/

使用overflow:hidden;清除浮动注意：
1.父亲有宽度，没有高度。
2.给父亲添加overflow：hidden；
3.IE6不支持overflow:hidden;清除浮动，所以如果要兼容IE6使用这个清除浮动时一起写: _zoom:1;

overflow:hidden;
_zoom: 1;