问题：

注：孩子浮动了，不占有位置， 而父级又没有高度，父级就会塌陷。

解决：

解决方法：

        /*声明清除浮动的样式*/
        
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }
        
        .clearfix {
            *zoom: 1;
            /*ie6,7 专门清除浮动的样式*/
        }

描述

1. 为什么要清除浮动

因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。

2.清除浮动本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

3清除浮动的方法

方法一(after 方式)：

注： 优点： 符合闭合浮动思想  结构语义化正确- 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

        /*声明清除浮动的样式*/
        
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }
        
        .clearfix {
            *zoom: 1;
            /*ie6,7 专门清除浮动的样式*/
        }

方法二（父级添加overflow属性方法）：

注：优点：  代码简洁。缺点：  内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

    .clearfix {
         overflow:hidden/*| auto| scroll都可以实现。*/
    }