清除浮动总结

发表于

假如我们有如下的一个结构：

1
2
3
4
<div clss="container" style="backgound-color:pink;">
   <h1>标题，浮动</h1>
   <p>段落，浮动</p>
</div>

当h1和段落都浮动后，父元素container坍塌所以不显示背景色@.@

通用做法：使用after伪元素

给浮动元素的父元素添加一个clearfix选择器：<div class="container clearfix"></div>

1
2
3
4
5
6
7
8
9
10
.clearfix:after{
  content:".";
  display:block;
  height:0;    //这三行是为了隐藏content的值
  clear:both;
  visibility:hidden;  //注意它和display:none是有区别的,hidden虽然不可见但仍然占据空间
}
.clearfix{
  zoom:1; //如果不考虑IE6/7可以不写（不支持:after伪类）
}

上述写法相当于在container末尾添加content中的内容，并将其设置为块级元素，高度为0，内容不可见，但任然占据空间，这样就会撑开div元素。隐藏content值还可以稍微改变一下：

1
2
3
4
5
.clearfix:after{
    content:" ";
    display:table;
    clear:both;
  }

这个css也许还不是最佳的，这里贴上一篇css hack文章：Lessons Learned Concerning the Clearfix CSS Hack

一些别的思路

  1. 在h1后添加一个空标签：<div style="clear:both;"></div>，这样会造成为了清除浮动页面可能有很多无意义的标签，pass！
  2. ​给container添加overflow
  3. container也设置为浮动，如果container外层还有容器，会影响整个布局。