导读：
CSS 的 Float(浮动)，会使元素向左或向右移动，其周围的元素也会重新排列，Float(浮动),往往是用于图像,使得文字围绕图片的效果，而它在布局时一样非常有用。不过有利也有弊，使用浮动的时候也会带来一些负面效果。为了不因浮动元素破坏整个文档的布局，所以需要清除浮动，而今清除浮动的方法众多，在此就常见的方法进行理解和记录。
基本概念
首先我们来看一下下面这种情况：父元素的边框未被撑开，子元素从下方溢出。
清除浮动前
清除浮动后
为什么会产生上面的情况呢，由于浮动的特性，导致本属于普通流中的元素浮动之后脱离了该流，包含框内部由于不存在其他普通流元素了，也就表现出所谓高度塌陷。而高度的塌陷使页面后面的布局不能正常显示，造成我们本不期望的效果，总的来说浮动带来的负作用包括：
- 边框不能撑开
- 背景不能显示
- margin 设置值不能正确显示
清除方法
由于浮动带来的影响，所以清除浮动很有必要，而今清除浮动方法不少，不过个别方法也存在着兼容性的问题，接下来就常用的几种方法做下简单的介绍。
1、使用clear属性
在浮动元素下方添加空div,并给该元素写css样式：
//代码简洁，浏览器支持好
.clearfix{ clear:both }
//增加了无意义的结构元素
2、使用overflow属性
给浮动元素的父元素定义 overflow: auto 或者 定义 overflow: hidden：
////代码简洁
.overflow: hidden; zoom: 1; //zoom: 1; 兼容低版IE
//不能和position配合使用，因为超出的尺寸的会被隐藏
3、为父元素指定高度
给浮动元素的父元素定义 overflow: auto 或者 定义 overflow: hidden：
//简单，简洁
width： * px;
//只适合高度固定的布局
4、伪元素（推荐）
给浮动元素的父元素定义 overflow: auto 或者 定义 overflow: hidden：
.clear{ zoom: 1; } // zoom: 1; 兼容低版IE
.clear:after{
content: '';
display: block;
clear: both;
height: 0; // 避免生成内容破坏原有布局的高度
overflow: hidden;
visibility: hidden;}
zoom 属性目前是IE的专有属性，设置该值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变该值时其实也会发生重新渲染，运用这个原理，也就解决了 IE 下子元素浮动时候父元素不随着自动扩大的问题。
写在最后
清除浮动常用的方法大概就是这几个，在不同的场景下选用最合适的方法就是最好的方法。更多内容点击查看 CSS 浮动。
如果文中有什么错误，欢迎大家指正，愿与大家在交流之中共同进步，愈激烈，愈深刻。感谢。