CSS清除浮动

本质

• 为什么清除浮动：是为了解决 父级元素因为子级元素浮动 引起内部高度为0 的问题（父亲不方便给高度因而一开始没有指定高度，当子级元素没有浮动时子级元素的大小会撑开父级元素，但当子级元素浮动时子级元素脱标，不再占用位置导致父级元素高度为0）

清除浮动的方法

• CSS样式属性 使用 clear：right或left或both（多数为both）
• 额外标签法：W3C推荐的方法，通过在最后一个浮动元素的后面添加一个额外的空标签，如<div class="clear"></div>，然后在CSS样式中设置.clear { clear: both; }清除浮动
• overflow清除浮动：给父级元素添加overflow 属性，属性值为hidden或auto或scroll都可以实现，但是一般使用hidden
• after伪元素清除浮动：正常浏览器清除浮动的方式

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

  • 将上面这一段样式放到初始化样式的文件中
  • 其中.clearfix:after是伪元素的一种写法，clearfix是自定义的元素类名，一般命名为clearfix，之后在页面需要清除浮动的父级元素添加该类名即可
  • IE6 自己特有的清除浮动的方式：.clearfix { zoom: 1; }，zoom表示缩放，也可以在zoom前面添加*号，添加了星号的元素只会被IE7及以下的版本所识别，别的浏览器会直接略过
  • 实际开发中 上面的两种方式都要加上
• 双伪元素清除浮动：

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

同样是在需要清除浮动的父级元素引用clearfix类名

清除浮动后 父级元素会自动检测子级元素的大小，设置自己的宽高为 以宽高最大的为准

不是所有的浮动都需要清除，只需清除对布局有影响的