html中的高度塌陷问题及解决方法

高度塌陷问题：

简而言之就是父元素不设置高度，以适应子元素的高度，但是子元素脱离文档流后，父元素将会塌陷，即没有子元素撑开它。

解决高度塌陷问题：

也就是说开启BFC就可以解决高度塌陷问题，但是或多或少会带来副作用

BFC作用：

1. 利用BFC避免margin重叠。
2. 自适应两栏布局。
3. 解决高度塌陷。
   
   最简单的就是将overflow：hidden

解决高度塌陷问题的其他两种方案：

第二种方案：（兼容所有版本，但会给结构带来多余文本）

第三种方案：（副作用最小，但不兼容ie6）

例子：

clearfix解决高度塌陷问题和父子元素内边距重叠问题（终极）：

可以解决两个问题