清除浮动的方法

1
选择器 { clear: 属性值; }   clear 清除
属性值 描述
left 不允许左侧有浮动元素（清除左侧浮动的影响）
right 不允许右侧有浮动元素（清除右侧浮动的影响）
both 同时清除左右两侧浮动的影响

实际工作中,几乎只用clear: both

1).额外标签法(隔墙法，W3C推荐的做法)

​ 通过在浮动元素末尾添加一个空的标签，阻挡后面的浮动标签，例如

，或则其他标签br等亦可。

​ 墙必须是块级元素，不能是行内元素。

​ 阻挡后父盒子有高度，孩子有多高则高度为多少。

  • 优点：通俗易懂，书写方便
  • 缺点：添加许多无意义的标签，结构化较差。

2).父级添加overflow属性方法

1
可以给父级添加： overflow为 hidden| auto| scroll  都可以实现。
  • 优点： 代码简洁
  • 缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

3).使用after伪元素清除浮动:after 方式为空元素额外标签法的升级版，给父标签添加，好处是不用单独加标签了

1
2
3
4
5
6
7
8
9
10
11
12
13
写法复制 .clearfix:after {	在父元素内部后面添加了个盒子，
        content: "";		不需要在子盒子一起单独多加标签了
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
  
    /* IE6、7 专有 */
    .clearfix {
        *zoom: 1;
    }
  • 优点：符合闭合浮动思想 结构语义化正确
  • 缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

4).使用双伪元素清除浮动

1
2
3
4
5
6
7
8
9
10
11
12
13
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
   *zoom: 1;
}
  • 优点： 代码更简洁，代表网站：小米，腾讯
  • 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

清除浮动总结

1
什么时候用清除浮动呢？
  1. 父级没高度
  2. 子盒子浮动了
  3. 影响下面布局了，我们就应该清除浮动了。
清除浮动的方式 优点 缺点
额外标签法（隔墙法） 通俗易懂，书写方便 添加许多无意义的标签，结构化较差。
父级overflow:hidden; 书写简单 溢出隐藏
父级after伪元素 结构语义化正确 由于IE6-7不支持:after，兼容性问题
父级双伪元素 结构语义化正确 由于IE6-7不支持:after，兼容性问题