CSS中高度塌陷问题

一.高度塌陷产生原因：

父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷

二.造成后果：

父元素的高度一旦塌陷，所有标准流中元素的位置将会上移，导致整个页面布局混乱

三.解决方案：

1.开启父元素的BFC:

（1）Block Formatting Context 块级格式化环境

（2）BFC是元素的隐含属性，默认是在关闭状态的

（3）可以通过一些特殊的样式，来开启BFC

（4）开启BFC后元素具有如下特性：

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

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

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

（5）开启BFC的方式有：

		设置元素浮动

		设置元素的浮动定位

		设置元素的类型为inline-block

		设置overflow为一个非默认值，一般用overflow：hidden开启BFC

2.在塌陷的父元素最后添加一个空白的div，然后对该div进行清除浮动：

（1）代码示例：

		<div id="box1">
			<div id="box2"></div>
			<div style="clear:both"></div>
		</div>

（2）存在问题：使用这种方式会在页面中添加多余的结构

（3）清除浮动：

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

clear可以用来清除其他浮动元素对当前元素的影响

（4）clear可选值：

		none：默认值不清楚浮动

		left：清除左侧浮动元素对当前元素的影响

		right：清除右侧浮动元素对当前元素的影响

		both：清除两侧浮动元素对当前元素的影响

3.使用after伪类，向父元素添加一个块元素，并对其进行浮动：

（1）该种方式原理与方法二原理一样（相当于在在后面加了一个空div），但是不用向页面添加对应的结构

（2）示例代码：

		.clearfix:after
			{
				content："";
				display:block;
				clear:both;
			}

四.高度塌陷完善：

1.子标签浮动，父标签高度崩塌

2.子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素：

使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠

3.也可以使用伪元素或者伪类before、after实现：

	.clearfix:after,.clearfix:after{
				content："";
				display:table;
				clear:both;
			}

4.通过修改后的clearfix是一个多功能的既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠