关于高度塌陷问题

关于高度塌陷问题

在写html页面进行布局时，为了使块级元素可以横排显示，可以写display:inline-block，但是中间会有缝隙，查了一下资料，可以通过一些办法解决，但是缝隙的大小与字体有关。所以也不太好。用float可以消灭缝隙。
但是新的问题又出现了，后面的元素也会受到前面浮动的元素影响。

父元素高度没设置，父元素的高度由内容撑起来，也就是子元素，子元素浮动，脱离文档流，不再占位置，父元素高度塌陷。

解觉办法

1. 在浮动后面添加一个空白的div

.clear{clear:both;}

2. 利用css3的:after伪元素
   :after是选中内容之后与结束标签之前的那部分
   给父元素添加:after，如

.clearfix:after{ content:"."; display:block; visibility:hidden; clear:both; } 由于IE6及其以下版本不支持after伪元素，所以添加zoom .clearfix{zoom:1;}，其原理与第一个差不多

3. 给父元素添加overflow
   还是是上述代码结构，添加overflow如下:
   .container{
   overflow:hidden;
   同样浏览器对overflow有兼容性问题，加上
   zoom:1;
   }

4. 设置父元素的高度(不推荐使用)

5. 父元素也浮动，会影响布局和新的问题(不推荐使用)