css 浮动和清除浮动

浮动（重点）

为什么要清除浮动

用浮动布局的时候我们必须要嵌套一个父级盒子，分为以下两种情况：
  1、有些父级盒子能够设置固定的高度，一定要设置；
  2、有些页面由于页面的需要不能给父级盒子设置高度，所以子元素浮动之后脱离了文档流，父级盒子不会被撑开，会影响我们后面的布局，所以要清除浮动的影响；

清除浮动本质：

父级盒子因为子级浮动引起内部高度为0的问题，清除浮动之后，父级就会根据浮动的盒子自动检测高度，从而解决影响下面盒子的布局问题；
清除浮动的方法：
清除浮动的属性和属性值：clear:both;

1.额外标签法（了解）

找到父级盒子中最后一个浮动的子元素，在该子元素后面添加一个空的标签：

       <div class="box">
			<div class="left"></div>
			<div class="right"></div>
			<div style=“clear:both;”></div>
		</div>	

书写方便，但是会添加许多没有意义的标签，不建议使用；

2.直接给父级添加overflow:hidden;

.box{
	overflow:hidden;
}

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

.clearfix:after{
 		display：block;
 		content:"";
 		clear:both;
 		height:0;
 		visibility:hidden;
}
.clearfix{
*zoom:1;/* ie6 、7专门清除浮动的样式*/
}
   <div class="box clearfix">
			<div class="left"></div>
			<div class="right"></div>
			<div style=“clear:both;”></div>
		</div>	

4.使用双伪元素清除浮动；（推荐使用）

.clearfix:after,.clearfix:before{
 		display：table;
 		content:"";
}