浮动和定位引起高度塌陷怎么办？

浮动和定位引起高度塌陷怎么办？

目前学习css，布局时经常遇到这种问题，后来才知道这叫高度塌陷，索性写篇文章总结下。May you like it.

首先理顺几个问题：
Q：什么是高度塌陷？
A： 子元素撑破了父元素，父元素无法包裹住子元素，见下：

效果：父级div有高度塌陷

Q：浮动为什么会造成高度塌陷？
A：浮动会破坏文档流结构，提升层级，浮动的div的层级和父级一样，但是父级又没有给定高宽度值，所以它就无拘无束的跑出来玩了。

Q：如何解决呢？
A : 我能想到的有以下几个方法。
1：给父级也加高度，使之能包裹住子元素。上图说话：

代码效果图：

但这样不利于扩展，如果有几百个div呢？每个都添加，形成代码冗余。

2：给父级也加浮动，同样地，扩展性不好，并且需要不断给父元素加浮动，给body加，给html加，同时margin：0 auto会失效。

3： 给父级加样式： inline-block(和2一样的原理，margin：0 auto会失效)

4： 在子级的同级加空div，加样式：clear：both（IE6下有最小高度偏差的兼容性问题）

5： 在子级的同级加：<br clear="all"/>(页面有很多需要清浮动怎么办？都写吗？不符合结构样式行为，三者分离的要求)

6：给父级加：overflow:hidden ，这是最常见的做法之一，会造成有些东西被隐藏，尤其在做三级导航菜单时，不方便。

0： 最优雅的hacker来了，不需要多加标签。给父级加 after伪类清浮动，其本质都是不变的，先加某个东西==》把某东西变成块元素==》清除浮动的样式。

定位引起的高度塌陷

代码效果图：

和浮动类似，定位也会提升元素的层级，目前我知道的办法是给父级也加高度。