作者：gqk;
清除浮动:好比我们的浮动，有浮动开始，则就应该有浮动结束。
为什么要清除浮动?
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。
准确地说，并不是清除浮动，而是清除浮动后造成的影响
如果浮动一开始就是一个美丽的错误，那么请用正确的方法挽救它。
清除浮动本质
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
border: 1px solid red;
}
.son1{
height: 100px;
width: 100px;
background-color: pink;
float: left;
}
.son2{
height: 100px;
width: 100px;
background-color: yellow;
float: left;
}
.foller{
width: 400px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">1</div>
<div class="son2">2</div>
</div>
<div class="foller">3</div>
</body>
</html>
由于 浮动后 原有的位置没有了 所以产生一下的问题，
清除浮动的方法
在CSS中，clear属性用于清除浮动，其基本语法格式如下：
选择器{clear:属性值;}
额外标签法
html 是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。
优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差。 我只能说，w3c你推荐的方法我不接受，你不值得拥有。。
父级添加overflow属性方法
~~~css 可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。 ~~~ 优点： 代码简洁
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
使用after伪元素清除浮动
:after 方式为空元素的升级版，好处是不用单独加标签了
使用方法：
```css .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {zoom: 1;} / IE6、7 专有 */ ```
