清除浮动的四种方法

为什么要清除浮动呢？

   原因是父级设置高度，子盒子浮动，会影响下面元素的布局。

方法1：额外标签法

        在浮动元素末尾添加一个空标签（块级元素）

        .chear { clear:both}

方法2：父级添加 overflow：hidden

方法3：父级添加    :after伪元素

                .clearfix:after{

                    content:" ";

                    display:block;

                   height:0;

                   clear:both;

                   visibility:hiddent;

                }

               .chearfix{

                   *zoom:1;    /*兼容IE 6 7*/

                }

方法4：父级添加  双伪元素

                .clearfix:before,

                .clearfix:after{

                    content:" ";

                    display:table;   /*块级表格表示*/

                }

               .chearfix:after{

                   clear:both;

                }

               .chearfix{

                   *zoom:1;    /*兼容IE 6 7*/

                }