css元素浮动导致高度塌陷

在CSS样式设计中，遇到元素浮动（float）后，有时候会因为高度塌陷的问题而导致排版混乱。下面我们来看一下什么是“高度塌陷”以及如何解决这个问题。@H_502_1@

	.container {
		width: 500px;
	}

	.Box {
		width: 250px;
		height: 150px;
		float: left;
	}

css元素浮动导致高度塌陷 @H_502_1@@H_502_1@

上面的代码是一个简单的例子，一个容器中放置两个浮动的块级元素盒子。浮动的效果会使得两个盒子元素左右排列，但是会发现，容器的高度出现了问题，容器的高度无法自适应里面的子元素，造成了 high clearfix 问题，这也就是高度塌陷现象。 @H_502_1@

造成高度塌陷的原因是：当一个元素浮动后，它的父元素的高度不能被浮动元素撑开，而且父元素会视为里面没有元素盒子，从而导致父元素的高度为零。 @H_502_1@

为什么会这样呢？主要是因为CSS3.0之前，CSS没有办法动态的检测浮动元素并将其高度纳入父级容器中。 @H_502_1@

目前有许多解决高度塌陷的方法，其中一种方式是使用CSS伪元素（:after）清除浮动： @H_502_1@

	.container:after {
		display: table;
		content: "";
		clear: both;
	}

上面的代码通过使用伪元素在父元素的内容之后插入一个空元素，并清除元素左侧和右侧的浮动，从而能够解决高度塌陷的问题。@H_502_1@

总之，在使用浮动时，需要注意高度塌陷的问题，选择合适的方法解决高度塌陷的问题可以有效的解决页面排版出现错乱的窘境。@H_502_1@