问题所在：
浮动的框可以左右移动，直至他的边缘遇到包含框或者另一个浮动框的边缘。漂浮在普通流的上面，完全脱离文档流。一个浮动元素的高度超出包含框时，包含框自己不会自己伸高来闭合浮动元素，引起高度塌陷。
解决办法：
1.添加额外标签
2.使用伪元素（：after是伪元素，不是伪类）清除
（这种做法是通过content“.”在元素后生成了一个内容为.的块级元素，原理和1类似）
这里解释一下.clearfix{*zoom:1;}，这个是为了不支持BFC的浏览器而写的（IE6~7）。zoom：1，触发IE hasLayout。
其中一和二都是添加了一个块级元素，不管是伪元素也好，块级元素自然就能让行内元素下沉了。（把父容器撑起来了）
3.触发BFC（块级格式化上下文）
BFC原理：创建了BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响从外面的元素，反之亦然，同时BFC依然属于文档中的普通流。
如果我们使父元素触发创建了BFC，那么父元素和子元素是两个BFC。（因为子元素float也是一个BFC）
BFC特性：
1.阻止外边距叠加
两个div，上下，margin-top，margin-bottom都是20px：
一般情况下，他们之间的外边距会叠加，第一个的底部到第二个的顶部相距20px；
如果属于两个不同的BFC，那么不会叠加，相距40px；
2.不会重叠浮动元素
一个BFC的边框不能和它里面元素的margin重叠。（浏览器会给BFC创建隐式的外边距来阻止他和浮动元素的外边距的叠加，所以当给一个挨着浮动元素的BFC添加负外边距不起作用。）
触发BFC的条件：
1.float除了none的值
2.overflow除了visible的值
3.display:(table-cell,table-caption,inline block)
display：table本身不会创建BFC，但是它会产生匿名框，而匿名框中的display：table-cell可以创建新的BFC。触发BFC的是匿名框，不是display：table。所以通过display：table和display：table-cell创建的BFC效果是不一样的。
4.position:(absolute，fixed)
