在文档流中，父元素高度默认是被子元素撑开的，也就是子元素多高，父元素就多高

但是当为子元素设置浮动后，子元素会完全脱离文档流，此时将导致子元素无法撑起父元素的高度，导致父元素的高度塌陷

解决办法：

1、我们可以将父元素的高度写死，但是会产生一个问题，就是父元素的高度无法自适应子元素的高度，所以不推荐这样处理

根据W3C标准，在页面中元素都有一个隐含的属性，叫做Block Formatting Context ，简称BFC,该属性可以设置打开或者关闭，默认是关闭的

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

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

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

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

开启办法：

1、设置元素浮动

-使用这种方式虽然可以撑开子元素，但是会导致父元素的高度丢失，也会导致下面的元素上移，不能解决问题

2、设置元素绝对定位

3、设置元素为inline-block

-可以解决问题，但是会导致宽度丢失，不推荐使用

4、将元素的overflow设置为非visible的值

-推荐方式 讲overflow设置为hidden,是副作用最小的开启BFC的方式(IE6 不支持BFC，所以使用这种方式不支持IE6,但是IE6也有一个类似BFC的属性 叫haslayout,开启方式为设置zoom:1）

--但是这种处理方式如果子元素中有相对定位的，如果在父元素外面会被隐藏

我们有时候希望清除其他元素浮动对当前元素的影响，这时候可以用clear来完成功能

left 清除左侧浮动元素对当前元素的影响，属性添加到当前元素上

both 清除对他影响最大的那个元素的浮动

清除后当前元素会回到其他元素浮动之前的位置

所以解决高度塌陷

1、将父元素的overflow设置为非visible的值

2、增加一个空白的div子元素 清除浮动 clear， 这种问题虽然可以解决问题，但是会添加多余的结构

可以使用父元素的伪类 .parent:after{content:"hello";display:block;clear:both}

hello本身是内联元素没有width和height，所以需要display:block;转换为块元素