清除浮动

一、概念

浮动元素脱离文档流，影响布局，需要清除浮动

二、方法

• 方法一：额外标签法  
  • 给谁清除浮动，就在其后额外添加一个空白标签 ，给其设置clear：both
• 方法二：父元素添加overflow:hidden 
  • 通过触发BFC方式，实现清除浮动
• 方法三：使用after伪元素清除浮动

  • #parent:after{
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    #parent{
        /* 触发 hasLayout */ 
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }

• 方法四：使用before和after双伪元素清除浮动

  • #parent:after,#parent:before{
    content: "";
    display: table;
    }
    #parent:after{
        clear: both;
    }
    #parent{
        *zoom: 1;
    }

• 方法五：为父元素设置高度