css解决高度塌陷的方法

高度塌陷

一、什么是高度塌陷

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

二、高度塌陷的解决方法

方法一：父元素结束之前添加一个标签<div style="clear:both;"></div>

缺点：增加了无意义的标签。

方法二：让父元素本身也浮动float：left;

缺点：虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且会导致下边的元素上移,使得跟父元素相邻的元素的布局受到影响。

方法三：给父元素设置overflow:hidden; zoom:1;

缺点：子元素margin负值定位或是负的绝对定位会被裁掉，所以此方法是有不小的局限性。

方法四：给父元素设置display: inline-block;

缺点：会导致父元素的宽度丢失。

方法五：给父元素一个固定高度，此方法适用于子元素高度已知并且固定的情况。

方法六：推荐使用的方法，万能清除法

缺点：单词太多，不好记。