在CSS规范中，浮动定位不属于正常的页面流（page flow），是独立定位的。所以，只含有浮动元素的父容器，在显示时不考虑子元素的位置，就当它们不存在一样。这就造成了父容器好像空容器一样。
如图：
解决浮动的方法##
方法一、
手动设置父元素的高度为合适的值，达到撑起父元素的效果。这种方法的优点是简单、代码少、容易掌握；但是，只适合高度固定的布局，要给出精确的高度。如果高度和父级div不一样时，会产生问题。
方法二、
浮动父元素。索性将父容器也改成浮动定位，这样它就可以带着子元素一起浮动。这种方法不用修改HTML代码，但是缺点在于父容器变成浮动以后，会影响到后面元素的定位，而且有时候，父容器是定位死的，无法变成浮动。
方法三、
利用clear:both属性。在浮动元素下方添加一个非浮动元素：<div style="clear: both">，或者以类名的方式添加.clearfix，clearfix{clear:both}。原理是父容器现在必须考虑非浮动子元素的位置，而后者肯定出现在浮动元素下方，所以显示出来，父容器就把所有子元素都包括进去了。优点是简单、代码少、浏览器支持好、不容易出现怪问题；缺点是如果页面浮动布局多，就要增加很多空div。在页面中增加冗余标签，违背了语义网的原则。
方法四、
让父容器变得可以自动"清理"（clearing）子元素的浮动，从而能够识别出浮动子元素的位置，不会出现显示上的差错。用上overflow属性。这种方法的缺点主要有二个，一个是IE 6、7不支持，另一个是一旦子元素的大小超过父容器的大小，就会出显示问题。
解决ie6、7兼容问题，可以在父元素添加zoom: 1;属性
可以使用overflow属性的auto、scroll和hidden值来清除浮动。若内容太大，auto、scroll会出现滚动条，太丑了，但也保持了原有的内容；hidden会裁剪元素，超出元素框边界的内容不可见，并且不利于seo。
参考链接：深入理解CSS溢出overflow
方法五、
父元素定义 伪类:after 和 zoom
代码：
.clearfix::after{
content: ' ';
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
*zoom: 1;
}
原理：类似于clear:both方法，利用:after在元素内部插入元素块，从而达到清除浮动的效果。
clearfix是父容器的class名称。
content:' ';是在父容器的开头或结尾处放一个空白字符。
display: block;确保这个空白字符是独立区块
ps：
content: '';display:block;对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。
height: 0;让所添加的空白字符为0高度
visibility:hidden;令浏览器渲染它，但是不显示。并且防止溢出
clear: both;清除浮动，让后面添加的子元素不找前面的左右浮动。
*zoom:1添加一条IE 6的独有命令,这条命令的作用是激活父元素的hasLayout属性，让父元素拥有自己的布局。IE 6会读取这条命令，其他浏览器则会直接忽略它。
IE使用Layout概念来控制元素的尺寸和位置。如果一个元素有Layout，它就有自身的尺寸和位置；如果没有，它的尺寸和位置由最近的拥有布局的祖先元素控制。
简而言之，*zoom:1是为了兼容IE6、7
终极版一、
Nicolas Gallagher贴出了更通用的生产代码。
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: ' '; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
content:' ';（注意内容字符串中的空格）避免了一个 Opera错误，
:before可以防止顶部边距在现代浏览器中崩溃。这有两个好处：它确保与其他浮动控制技术的视觉一致性，从而创建新的块格式化环境，例如， overflow:hidden；当使用IE 6/7*zoom:1时，它确保视觉一致性。
:after用于清除浮体。
因此，不需要隐藏任何生成的内容，并且减少所需代码的总量。
display:table会产生一些匿名盒子，这些匿名盒子的其中一个（display值为table-cell）会形成BFC。
BFC：即Block Formatting Context 直译为“块级格式化范围”。可以把它理解成是一个独立的容器，并且这个容器的里box的布局，与容器外部的毫不相干。BFC 具有普通容器没有的一些特性，例如可以包含浮动元素，上面的方法四（如 overflow 方法）就是触发了父元素的 BFC ，使到它可以包含浮动元素，从而防止出现高度塌陷的问题。
触发 BFC 的条件如下：
- 浮动元素，float 除 none 以外的值
- 绝对定位元素，position（absolute，fixed）
- display 为以下其中之一的值 inline-blocks，table-cells，table-captions
- overflow 除了 visible 以外的值（hidden，auto，scroll）
在 CSS3 中，BFC 叫做 Flow Root，并增加了一些触发条件：
- display 的 table-caption 值
- position 的 fixed 值，其实 fixed 是 absolute 的一个子类，因此在 CSS2.1 中使用这个值也会触发 BFC ，只是在 CSS3 中更加明确了这一点。
终极版二、
.clearfix:after {
content:"\200B";
display:block;
height:0;
clear:both;
}
.clearfix {
*zoom:1; /*IE/7/6*/
}
:content:"\200B";Unicode字符里有一个“零宽度空格”，即 U+200B，代替原来的“.”，可以缩减代码量。而且不再使用visibility:hidden;。
参考：
浮动元素容器的clearing问题
css清除浮动float的三种方法总结
深入理解CSS溢出overflow
A new micro clearfix hack
clearfix清除浮动进化史
详说 Block Formatting Contexts (块级格式化上下文)
详说清除浮动
关于Block Formatting Context－－BFC和IE的hasLayout
