如何解决浮动塌陷

浮动（float）的框可以左右移动，直至它的外边缘碰到包含框或另一个浮动框的外边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级元素的布局而只会影响内联元素（通常是文本）的排列，文档中的普通流就表现得如同浮动框不存在一样。 如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候，那么它的高度就会踏缩为零。这是因为浮动元素脱离了文档流，包围它们的父块中没有内容了，所以“塌陷”了。

1. 使用带clear属性的空元素
在父块中、浮动元素后使用一个空元素，eg：div标签、br标签、hr标签，并在css中赋予clear:both属性即可清除浮动。

给空元素设置clear后，因为它的左右两边不能有任何浮动元素，所以空元素下移到浮动元素下方。而空元素又包含在父块中，相当于把父块撑开了，视觉上起到了父块包含浮动元素的效果

2. 使用CSS的overflow属性

父级元素添加overflow:hidden/overflow:auto的样式一般情况下很适用，但由于overflow是一种样式的属性，（规定当内容溢出元素框时发生的事情），所以使用该样式虽然可以解决高度塌陷的问题，但是有时候可能会影响元素的样式，所以不要作为主要清理浮动方式

3. 给浮动元素的容器添加浮动

给浮动元素的容器（父元素）也添加上浮动属性即可清除浮动，但是这样会使下一个元素受到这个浮动元素的影响，影响整体布局，不推荐使用。

4. 使用CSS的：after伪元素

给浮动元素的父级元素添加样式css【:after】的伪元素（主要样式如下）—– 所谓的万能清楚法

.clearfix:after{
　　　　content: ‘ ‘; —– 可以是看不见的空格“/20”或点“.”
　　　　display: block;
　　　　height: 0;
　　　　clear: both; —– 清除浮动
　　 }

　　 .clearfix{

　　　　zoom:1; —– 为了IE6和IE7浏览器

　　 }

　　 这类方式叫万能清楚法，只要能给元素添加class类名即可，不会有无用的空标签，也不会修改父级元素的样式，推荐使用

5. 给浮动元素的父级元素添加固定的高度CSS