高度塌陷问题和解决高度塌陷问题

什么是高度塌陷

在文档流中，父元素的高度默认是由子元素撑开的，等于说子元素多高，父元素就多高，但是当为子元素设置了浮动之后，子元素会脱离文档流，此时，将会导致子元素无法撑起父元素的高度，会导致父元素的高度塌陷

高度塌陷会导致的问题
会使父元素下面的兄弟元素都想上移动，会使页面布局变化，影响原来的布局

未塌陷之前

塌陷之后：

解决高度塌陷问题

第一种：
直接设置父元素的高和宽，使其固定
不方便，不推荐，这样设置父元素的高度不会适应子元素的高度

第二种
用Block Formatting Context简称BFC属性

BFC属性：
BFC是页面元素的一个隐藏属性，默认是关闭的，当此属性开启则开启他的元素会有如下的特性

父元素的垂直外边距不会和子元素重叠
不会被浮动元素所覆盖
父元素开启后可以包含浮动的子元素

如何开启BFC
BFC不能直接开启，我们只能通过其他方法间接开启

1.设置元素浮动(对于我们解决问题没多大帮助)
即意思是当这个元素成为了浮动元素，那么他就会开启BFC因为这个时候他确实有了上面三个特性
同时会宽度丢失…=

2.设置元素绝对定位
以后再说

3.设置元素为inline-block
语法：
dispaly:inline-block
即设置元素为行内块元素
但是此方法，也会导致宽度丢失

4.将元素的overflow设置为一个非visible的值
语法：
overflow:值
可以将overflow的值设置为hidden这是开启BFC副作用最小的方法

overflow相关知识请移步至：地址

在IE6即以下浏览器不支持BFC

在IE6即以下浏览器有一个hasLayout属性作用跟BFC类似
开启方法有很多种，我们用这种：

直接将元素的zoom设置为1
语法：
zoom:1
zoom表示放大的意思，后面的数值为几就放大几倍

在IE6中，指定元素的宽度也会开启他的hasLayout属性

第三种
使用clear(推荐)

步骤：

在高度塌陷的元素里的最后添加一个空白的子元素div
为这个子元素添加clear值为both的属性

原理：
高度坍塌原因就是因为父元素中的子元素无法撑起父元素所至

我们在父元素所有的子元素的最后面设置一个不浮动的div(即不脱离文档流的块元素)

中间不要加内容(有内容会让这个div有自己的大小，不好看，他只需要有块元素的属性就行)

因为他不浮动，所以能撑起父元素

当然，如果要他撑起父元素，那么他就不能受他前面的浮动元素的影响我们就设置它不受浮动影响即设置clera（clear知识请移步至这个文章底部）

然后他这个空块元素就卡在父元素的底部，使整个父元素无法坍塌，而且这个空块元素的位置还会因为前面浮动元素的变化而变化，所以这个解决方法很赞
但是会给页面添加多余的结构

我们还可以用css向父元素后面添加块元素，这样也不会影响html整个结构（最推荐）
IE6不支持