清除浮动及清除浮动的方法

一、为什么要清除浮动

　　因为父盒子很多时候不方便给高度，由于浮动元素不在占有原文档流的位置，所以他会对后面的元素排版产生影响

　　准确的来说，并不是清除浮动，而是清除浮动后造成的影响

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

二、清除浮动的方法

　　1.clear属性

　　语法：选择器{clear:属性值};

属性值	描述
left	不允许左侧有浮动元素
right	不允许右侧有浮动元素
both	同时清除左右两侧浮动的影响

　　实际开发中，一般都只使用 clear：both

　　2、额外标签法　

W3C推荐的做法是在浮动元素的末尾添加一个空的标签例如  <div style="clear:both"> </div>,或者其他标签br等也可以

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

　　3.父级元素增加overflow属性方法

给父级添加 overflow：hidden | scroll | auto

优点：代码简洁
缺点：无法显示需要溢出的元素，会导致内容被隐藏掉

　　4.after伪元素清除浮动

使用方法
    .clearfix:after{content:"";display:block;hieght:0;clear:both;visibility:hidden;}
    .claerfix{ *zoom:1;}/*IE6、7专有*/

　　5.双伪元素清除浮动

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

.clearfix{
  *zoom:1;
}