解释下浮动和它的工作原理？清除浮动的方法

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

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

清除浮动的方法：
1，添加额外标签
在浮动元素末尾添加一个空的标签，例如
<div style='clear:both'></div>
优点：通俗易懂，容易掌握
缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦。
代码如下：

 p{
    float: left;
  }

   <div>
        <p>123</p>
        <p>345</p>
        <div style="clear: both"></div>
    </div>

2, 使用 br标签和其自身的 html属性
<br clear="all" />
优点：比空标签方式语义稍强，代码量较少
缺点：同样有违结构与表现的分离，不推荐使用

 p{
    float: left;
  }

   <div>
        <p>123</p>
        <p>345</p>
        <br clear="all" /> 
    </div>

3, 父元素设置 overflow：hidden
通过设置父元素overflow值设置为hidden。在IE6中还需要触发 hasLayout ，例如 zoom：1。
优点：不存在结构和语义化问题，代码量极少
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；overflow:hidden会导致中键失效。

 p{
    float: left;
  }

   <div style='overflow:hidden'>
        <p>123</p>
        <p>345</p>
    </div>

4, 父元素设置 overflow：auto 属性.
优点：不存在结构和语义化问题，代码量极少
缺点：多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无故产生focus等。
代码只需把上面属性overflow改为auto即可。

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}

优点：结构和语义化完全正确,代码量居中
缺点：复用方式不当会造成代码量增加
代码如下：

  p{
       float: left;
    }
  .clearfix:after {
        content:" "; 
        display:block; 
        visibility:hidden; 
        clear:both; 
    } 
  .clearfix { *zoom: 1}

<div class="clearfix">
        <p>123</p>
        <p>345</p>
</div>