1. 父元素高度塌陷的原因

父容器的高度是内部容器撑开的，当子元素元素浮动后，脱离了正常文档流，导致父容器的高度塌陷，高度变为0px。

2、如何清除浮动

1. overflow: hidden;

原理：BFC（Block Formatting Context）全称是块级格式化上下文。计算BFC的高度时，浮动元素也参与计算。为父元素添加overflow:hidden，使父元素具有BFC特性。

优点：简单，代码少，浏览器支持好。
缺点：必须定义width或zoom:1（含有浮动子元素的元素），不能和position配合使用，因为超出的尺寸会被隐藏。
建议：只推荐没有使用position或对overflow:hidden理解的朋友使用。

2. 结尾处加空div标签，并为其添加属性clear:both

表示在其左右两侧均不允许浮动元素

原理：添加一个空div，利用css的clear:both清除浮动，让父级div能自动获取到高度。
优点：简单，代码少，浏览器支持好，不容易出现怪问题。
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不爽。
建议：此方法是以前主要使用的一种清除浮动方法。

3. 直接为父级div定义height 

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单，代码少，容易掌握。
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题。
建议：不推荐使用，只建议高度固定的布局时使用。

4. 父级div定义overflow:auto 

原理：如果宽度是由内容自适应撑开的，则overflow: auto;

问题：撑开容器至正好显示所有内容时，如果有滚动条，则滚动条会覆盖在内容上方，导致内容宽度再次被缩小，然后出现省略号。由此推测渲染顺序：自适应宽度 → 根据高度显示滚动条 → 重新计算内部元素宽度

建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

5.父级div定义伪类:after和zoom

.container: after  表示在container的内容之后插入元素，插入的元素仍在container盒子模型之中

优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）。
缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持。
建议：推荐使用，建议定义公共类，以减少CSS代码。

注：使用zoom:1是为了兼容IE6

当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

zoom:1能够比较神奇地解决ie下比较奇葩的bug：

外边距（margin）的重叠，浮动的清除，触发ie的 haslayout属性等等。