浮动元素引起的问题：
1. 父元素的高度无法被撑开，影响与父元素同级的元素
2. 与浮动元素同级的非浮动元素会跟随其后
3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
清除浮动的方式，大致有以下三种，他们之间的区别也会大概说一下。
先写个html代码结构:
<div class="layout">
<div class="son1 box"></div>
<div class="son2 box"></div>
</div>
写一下css样式
.layout{border:1px solid black;background：yellow}
.box{width:100px;height:100px;background:green;}
.son1{float:left;}
.son2{float:right}
如果我们不给最外面父级元素.layout设置高度，而里面的子元素浮动的话，那么父级元素高度无法被撑开，背景颜色无法显示等等；同理，如果子元素不浮动，父元素的高就可以被撑开。那么就来解决以下该问题。
方法一：在父级元素里增加一个新的元素，比如<div class="clear"></div>,其属性为clear：both;
方法二：给父级添加一个属性：overflow：hidden;（或者overflow：auto）两者都可以达到清除浮动的效果，但是前者比较常用。
方法三：写一个伪类，：after 和 ：before 方式；在父级元素里写,再给父元素增加class名<div class="layout clearfix">
现在写一下清除浮动的代码
.clearfix{
zoom:1; //这个zoom:1 是为了处理兼容问题
}
.clearfix : after{
display: block;
content: " ";
clear: both;
}
这种方式相对来说是清除浮动比较好的方式，其原理和clear：both差不多。以上三种方式的区别在于方法一 clear:both造成了代码的冗余且不贴合，而方法二它还有一层含义是“超出部分隐藏”，会带来一些问题，方法三还是比较实用的，只是增加了个伪类，就是实现清除浮动的效果。
