CSS07_四种方式解决高度塌陷

前言：什么是高度塌陷？

• 父元素高度自适应，子元素 float 后，造成父元素高度为0，称为高度塌陷问题。

方案一：给父元素一个固定的高度

• 缺点：一旦将父元素高度写死，它将不能自动适应子元素的高度,不够灵活，不推荐使用。

方案二：给父元素添加属性 overflow: hidden;

• 优点：浏览器支持好，简单；

• 缺点：当子元素有定位属性时，设置 overflow: hidden; 容器以外的部分会被裁剪掉。

方案三：添加一个空的div

步骤一：直接在高度塌陷的父元素的最后添加一个空的div，由于这个div没有浮动，所以它可以撑开父元素的高度

步骤二：然后对其进行清除浮动，通过这个空白div来撑起父元素的高度

	div{
	    clear: both;
	}
	/*设置了clear:both的当前元素会把前边元素当做
	没设浮动一样来看待，以此来消除其对自己的影响*/

• 优点：此方法基本没有副作用

• 缺点：虽然可以解决问题，但是会在页面中添加多余的结构

方案四：万能清除浮动法

通过after伪元素向父元素的最后添加一个空白的块元素，再对其清除浮动

	.父元素::after{
      content: "";
      display: block;
      clear: both;
    }

	//可以设置.clearfix类，谁高度塌陷给谁加clearfix类即可
	.clearfix::after{

	}

• 优点：不会造成代码冗余，剩余代码性能优化，推荐使用。