CSS 清除浮动的四种方法

随便记记，如有错误之处，欢迎指出 

 
情形：不给父div默认高度

浮动效果

可见父div没有跟随子div而撑开

清除浮动

1.额外标签法 （缺点：添加了无意义的标签，结构化比较差）

额外标签法

666  父div果然被撑开了

2.父元素overflow (缺点：无法显示溢出部分)

父元素overflow

666  我能撑开父元素

3.:after伪元素法 （推荐使用）

:after 方式是额外标签法的升级版。也是给父元素添加

:after伪元素法

666   推荐使用我哦

代码复制

.clearfix:after {

      content: '';

      display: block;

      height: 0;

      clear: both;

      visibility: hidden;

    }

.clearfix {

      /* IE6、7专有 */

      *zoom: 1;

 }

4.双伪元素清除浮动

也是给父元素添加

666   也是推荐使用我哦

代码复制

.clearfix:before,

    .clearfix:after {

      content: '';

      display: table;

    }

    .clearfix:after {

      clear: both;

    }

    .clearfix {

      /* IE6、7专有 */

      *zoom: 1;

    }