CSS——解决元素浮动导致的父元素高度塌陷的问题

一、问题：元素浮动导致的父元素高度塌陷

父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷。父元素的高度一旦塌陷, 所有标准流中元素的位置将会上移，导致整个页面的布局混乱。

例如：

的效果是：

二、为了解决问题，这里先介绍一下浮动元素的特点：

（1）元素浮动以后会完全脱离文档流，浮动以后元素会一直向父元素的最上方移动，直到遇到父元素的边框或者其他的浮动元素，会停止移动。

（2）如果浮动元素的上边是一个块元素，则浮动元素不会覆盖块元素。

（3）浮动元素不会超过它上边的浮动的兄弟元素，最多一边齐。

（4）浮动元素不会覆盖文字，文字会自动环绕在浮动元素的周围，可以通过浮动来实现文字环绕的效果。

（5）块元素脱离文档流以后，不会独自占一行，宽度和高度都被内容撑开。

（6）内联元素脱离文档流以后会变成块元素

三、解决方法

(1)浮动元素后添加<div class="clear"></div>添加清除浮动样式，使用这种方式会在页面中添加多余的结构。

(2)使用after伪类，向父元素后添加一个块元素，并对其清除浮动。该种方式的原理和方法一原理一样，但是不用向页面中添加多余的结构。

(3)为父元素添加样式overflow:hidden。这种方法对于有子元素有定位并且要求超出父容器范围的情况不适用。

(4)手动为父元素添加高度，需要计算内容的高度，不便于页面调整。

四种方法都可以实现调整，调整后的效果：

这里推荐第二种方法，使用after伪类的方式。