《学习笔记78》—— # CSS # 解决高度坍塌问题

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

解决办法

1. 为元素开启BFC（Block Formatting Context）

当开启元素的BFC以后，元素将会具有如下的特性：

• 1.父元素的垂直外边距不会和子元素重叠    
  

• 2.开启BFC的元素不会被浮动元素所覆盖
  

• 3.开启BFC的元素可以包含浮动的子元素
  

那如何开启元素的BFC呢？

1. 设置元素浮动：使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题。
2. 设置元素开启绝对定位。
3. 设置元素为inline-block：可以解决问题，但是会导致宽度丢失，不推荐使用这种方式。
4. 将元素的overflow设置为一个非visible的值，一般设置为overflow:hidden;。

一般使用第四种方法解决高度坍塌。

2. 通过after伪类

可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div，这是最推荐使用的方式，几乎没有副作用。

clearfix:after{
		/*添加一个内容*/
		content: "";
		/*转换为一个块元素*/
		display: block;
		/*清除两侧的浮动*/
		clear: both;
	}