解释下浮动和它的遗留问题？清除浮动的方法（4种）

浮动为该元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

浮动引起的问题：

父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素（内联元素）会紧跟其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

清除浮动的方法：

script
1, 添加额外标签
  在浮动元素末尾添加一个空的标签，

优点：通俗易懂，容易掌握 
缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦。 
2, 使用 br标签和其自身的 html属性 

 
优点：比空标签方式语义稍强，代码量较少 
缺点：同样有违结构与表现的分离，不推荐使用 
3, 父元素设置 overflow：hidden
优点：不存在结构和语义化问题，代码量极少 
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；overflow:hidden会导致中键失效。 
4、父元素设置 overflow：auto 属性。同样IE6需要触发hasLayout，演示和3差不多 
优点：不存在结构和语义化问题，代码量极少 
缺点：多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无故产生focus等。
5,使用:after 伪元素 
需要注意的是 :after是伪元素（Pseudo-Element），不是伪类（某些CSS手册里面称之为“伪对象”），很多清除浮动大全之类的文章都称之为伪类，不过csser要严谨一点，这是一种态度。由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。 
.clearfix:after {content:" "; display:block; visibility:hidden; clear:both; } 
.clearfix { *zoom:1; }
优点：结构和语义化完全正确,代码量居中 
缺点：复用方式不当会造成代码量增加