1.为什么浮动？
默认块级元素是独占一行的，而浮动就是让块级元素共处一行；那么为什么不设置成行内块级元素呢，因为它会有空隙。
浮动 行内快
行内元素浮动起来就会自动变成块元素；
float:left/right
2.清除浮动
为什么要清除浮动呢？在未给父元素设置固定高度的时候，浮动元素使其父元素高度塌陷；假设给父元素设置了边框，当其子元素设置浮动后，浮动元素将无法撑开父元素边框
未浮动 浮动后
这是因为当“元素设置浮动后，会自动脱离文档流”，也就是元素浮动后，就不在整个文档流的管辖范围内，那么它之前存在父元素内的高度就会随着浮动不存在了，而此时父元素会默认自己里面没有内容。
当其中一个子元素设置浮动，而后面元素没有设置浮动，浮动元素会脱离文档流不在占据位置，后面未浮动的元素会占据它的位置。
未浮动 红色浮动绿色未浮动
3.解决方法
1.给父元素一个固定高度，此方法适用于子元素高度已知并且固定的情况
2.在浮动元素后面添加一个空的div,并给此元素设置clear:both，这样无疑是增加了无意义的标签，这种标签太多不好。
3.overflow：hidden；
●隐藏溢出，当内容超过其父元素时，该属性可以将溢出的部分裁减掉，使页面更加美观。
●清除浮动，当子元素浮动时，给父元素加overflow:hidden，按照它的第一个特性，应该将子元素超出的部分裁减掉，但是子元素有浮动，无法裁剪，所以只能由父元素增加高度去包裹住子元素，使得父元素拥有了高度，而这个高度是跟随子元素自适应的高度，这样就把浮动的子元素包含在父元素内了。
4.：after 伪类
利用伪类来清除浮动，其效果跟创建一个空的div并设置其为clear:both;是一样的，只不过这里的伪类代替了空的div元素。
.clraefix{
zoom:1;/*解决低级IE的问题*/
}
.clearfix:after{
content:"";/*加一个空内容*/
clear:both;/*清除浮动*/
display:block;/*确保该元素是一个块级元素*/
}
<div class="div clearfix ">
<div class="div1">我是浮动元素1</div>
<div class="div2">我是浮动元素2</div>
</div>