1、为什么使用浮动
为了解决几个块级元素并排显示问题，虽然可以使用定义块级元素的display为inline-block（这种方式也不会出现父级元素坍塌问题）但是这种方式不能控制元素的位置而是默认从左到右，所以要实现元素是居左还是居右使用浮动更方便。
2、为什么清除浮动
解决父级高度塌陷问题
3、如何清除浮动
1）父元素添加overflow:hidden
缺点：超出边框的内容会被隐藏。
问题：当组先级元素相对定位，父元素overflow：hidden；时，子元素超出部分不隐藏，如下图：child元素超出部分没有被隐藏
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.grandfather {
position: relative;
width: 400px;
height: 400px;
background-color: pink;
}
.dad{
width:300px;
height:300px;
background-color: blue;
overflow: hidden;
}
.child{
position:absolute;
width: 600px;
height: 600px;
background-color: red;
}
</style>
</head>
<body>
<div class="grandfather">
<div class="dad">
<div class="child"></div>
</div>
</div>
</boy>
</html>
2）父元素添加clear:both;
缺点：margin失效。不推荐
3）父元素添加伪元素::after，设置clear:both，比较推荐
.clearfix::after{
content:’’;
clear:both;
display:block; /*转为块级元素*/
}
优点：父元素被子元素内容撑开（父元素有高度），比较方便也符合语义化
缺点：IE6/IE7不识别:after伪元素，存在兼容性问题
4）在两个父盒子之间“隔墙”(加一个冗余元素div)
上下两个父盒子的margin失效，需要将该"墙"设置高度当缝隙
浮动.jpg
缺点：必要在页面添加很多没有意义的冗余元素，过于麻烦，而且不符合语义化
5）给父级元素单独定义高度
优点：简单、代码少、容易掌握。
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题。对于响应式布局会有很大影响。
