网站布局中清除浮动（学习笔记）

1.为什么要清除浮动

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

2.清除浮动的方法

1.额外标签法
通过在浮动元素末尾添加一个空的标签例如<div style=”clear:both”></div>，或则其他标签br等亦可。
2.父级添加overflow属性方法
父级类中添加overflow: hidden;
3使用after伪元素清除（推荐）

 .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */

父级中调用clearfix类即可
4.使用双伪元素清除（推荐）

.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

同上父级中调用clearfix类。

3.什么时候使用清除浮动

1.父级没高度
2.子盒子浮动了
3.影响下面布局了，我们就应该清除浮动了。

本文来自Pink老师的笔记。
补充：
1.需要清除浮动的情况：
父盒子无高度，而孩子浮动了。此时父盒子应该使用清除浮动，否则影响下面盒子的布局。
2.浮动元素，绝对定位（固定定位）元素的都不会出现外边距合并的问题。