浮动与清除浮动
浮动是什么？
元素的浮动是指设置浮动的元素脱离了标准文档流的控制，移动到其父元素中的指定位置的过程，碰到父元素的边框会停留。脱离文档流的元素不占据标准流的位置，因此会影响标准流。
在CSS中，通过float属性来定义浮动，其基本语法格式为 选择器 {float:属性值;}
| 属性值 | 描述 |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 元素不浮动(默认值) |
浮动的作用在于让块元素在同一行显示，方便我们布局，但是浮动也会产生副作用，
1. 浮动元素的父元素的高度无法撑开
2. 若与浮动元素同级的后面的盒子不浮动，后面的盒子会占据浮动元素原来的位置，浮动元素会浮在后面盒子的上面
3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
清除浮动的方法
1. 将浮动元素添加一个与元素容器包裹起来，并且给父元素设置固定高度
计算浮动元素的高度，根据浮动元素的高度来计算父元素的高度，缺点是每次设计都要人为计算，不灵活。
<style>
/* css 给父元素设置高度来清除浮动 */
.div1 {
width: 200px;
background-color: pink;
height: 200px;
overflow: hidden;
float: left;
}
.div2 {
width: 200px;
height: 200px;
background: purple;
float: left;
}
.div3 {
width: 420px;
height: 200px;
background: blue;
}
.parent {
height: 200px;
}
</style>
<!-- html -->
<div class="parent">
<div class="div1">
</div>
<div class="div2">
</div>
</div>
<div class="div3"></div>
2. 在最后一个浮动元素的后面添加一个空元素，设置属性clear:both清除浮动，这样父元素会自动检测子元素的高度（以最高的为准），缺点是要额外添加空元素
<style>
/*css 清除浮动*/
.clear {
clear: both;
}
</style>
<!-- html -->
<div class="div1">
</div>
<div class="div2">
</div>
<div class="clear"></div>
<div class="div3"></div>3. 给浮动元素的父元素（与第一种方法一样，也是添加了元素，但灵活性比较高）设置overflow:hidden，将第一种方法中的parent高度值的设置改为overflow:hidden这一句就好了，很容易写，就不写代码了
为什么overflow:hidden会起作用呢，这是因为overflow:hidden相当于是让父级元素紧贴内容，这样即可紧贴其对象内的内容(包括使用float的盒子)，从而实现了清除浮动
这样虽然灵活性高，但是也有缺点，内容增多的时候容易造成不自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
4. 使用伪元素after，给浮动元素的父容器添加设置after伪元素，具体设置样式为
.parent:after {
/* 缺一不可 */
clear: both;
content: ""; /*以前不能设置为空，因为有些浏览器会自动为它添加空格，但是现在可以了*/
display: block;
height: 0; /*如果缺少，将会占据一定的高度*/
visibility:hidden;
}
/*为了兼容IE6，设置zoom属性的属性值为1*/
.parent {
zoom: 1;
/*如果要兼容IE7以下的版本，请使用下面这种样式(去掉zoom: 1;)*/
*zoom: 1; /* *表示IE7以下识别 */
}还有一种写法，也是利用伪元素，只需要给要父元素添加clearfix类名就可以了
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
注释：元素添加浮动之后，会具有行内块元素的特性(隐藏模式转换)。元素的大小完全取决于定义的大小或者内容的多少，浮动根据元素书写的位置显示相应的浮动。