关于高度塌陷问题
在写html页面进行布局时,为了使块级元素可以横排显示,可以写display:inline-block,但是中间会有缝隙,查了一下资料,可以通过一些办法解决,但是缝隙的大小与字体有关。所以也不太好。用float可以消灭缝隙。
但是新的问题又出现了,后面的元素也会受到前面浮动的元素影响。
父元素高度没设置,父元素的高度由内容撑起来,也就是子元素,子元素浮动,脱离文档流,不再占位置,父元素高度塌陷。
解觉办法
- 在浮动后面添加一个空白的div
- 利用css3的:after伪元素
:after是选中内容之后与结束标签之前的那部分
给父元素添加:after,如
-
给父元素添加overflow
还是是上述代码结构,添加overflow如下:
.container{
overflow:hidden;
同样浏览器对overflow有兼容性问题,加上
zoom:1;
} -
设置父元素的高度(不推荐使用)
-
父元素也浮动,会影响布局和新的问题(不推荐使用)