高度塌陷
一、什么是高度塌陷
在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当子元素设置浮动之后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。
二、高度塌陷的解决方法
方法一:父元素结束之前添加一个标签<div style="clear:both;"></div>
缺点:增加了无意义的标签。
方法二:让父元素本身也浮动float:left;
缺点:虽然可以撑开父元素,但是会导致父元素的宽度丢失,而且会导致下边的元素上移,使得跟父元素相邻的元素的布局受到影响。
方法三:给父元素设置overflow:hidden; zoom:1;
缺点:子元素margin负值定位或是负的绝对定位会被裁掉,所以此方法是有不小的局限性。
方法四:给父元素设置display: inline-block;
缺点:会导致父元素的宽度丢失。
方法五:给父元素一个固定高度,此方法适用于子元素高度已知并且固定的情况。
方法六:推荐使用的方法,万能清除法
缺点:单词太多,不好记。