CSS之高度塌陷

1、在文档流中，父元素的高度默认是被子元素撑开的，当子元素浮动以后，子元素脱离文档流，此时将导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

2、由于父元素塌陷，则父元素下的所有元素向上移动，导致页面布局混乱。

3、根据w3c的标准，页面中元素都有一个隐含的属性叫Block Formatting Context简称BFC（IE6及以下版本不支持），该属性可以设置打开或关闭，默认为关闭，当开启以后，元素将会具有以下特性：

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

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

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

4、开启方式：

①设置元素浮动

--虽然可以撑开父元素，但父元素宽度丢失，下边的元素会上移。

②设置元素绝对定位

--同上

③设置元素为inline-block

--可以撑开，父元素宽度丢失

④将元素的overflow设置为一个非visible的值（使用hidden较好）

⑤ie6及以下使用hasLayout，即将元素的zoom设置为1即可。

--zoom表示放大，后边跟数值表示放大几倍

--zoom:1表示不放大，但是该样式可以开启hasLayout

--zoom只有ie支持。

5、解决办法

      ①可以将父元素高度写死，但此时父元素的高度将不能自动适应子元素的高度（不推荐）。

      ②使用clear（推荐，但是添加了多余的结构）

---clear属性可以用于清除元素周围的浮动对元素的影响

---也就是元素不会因为上方出现了浮动元素而改变位置

---可选值：
– left：忽略左侧浮动
– right：忽略右侧浮动
– both：忽略全部浮动（影响最大的那个）
– none：不忽略浮动，默认值

具体步骤：

可以在高度塌陷的父元素的最后添加一个空白的div，由于这个div并没有浮动，所以它可以撑开父元素的高度，然后对其进行清除浮动，这样可以通过这个空白的div来撑开其父元素的高度，基本没副作用

③通过CSS伪类after（原理与②相同，但是没使用div，同时ie6不支持）

.box1:after{

context:"";/*添加内容为空*/

display:block;/*转换块元素*/

clear:both;/*清除浮动*/

}