巧妙利用负外边距实现栏等高

    先来看代码：

<div class="wrapper">
		<div class="box1">
			<h1>Box1</h1>
		</div>
		<div class="box2">
			<h1>Box2</h1>
			<p>sdfdsfdsfsd</p>
		</div>
</div>
        .wrapper{
			overflow:hidden;
			border:1px solid green;
		}
		.box1,.box2{
			margin:0px 20px;
			float:left;
		}
		.box1{
			background:yellow;
		}
		.box2{
			background:blue;
		}

效果如下图所示：

由于栏中的内容问题，导致box1与box2的内容不等高。这里巧妙利用padding和margin属性即可解决等高问题。先设置padding-bottom，让背景有足够的填充空间：

.box1,.box2{
			margin:0px 20px;
			float:left;
			padding-bottom:100px;
		}

然后将margin-bottom设为负值，将外围的容器(wrapper)的底边框拉上来，由于外围容器的溢出属性为hidden，所以box1和box2的溢出部分将会被裁减掉，如下：

.box1,.box2{
			margin:0px 20px;
			float:left;
			padding-bottom:100px;
			margin-bottom:-80px;
		}

这样就实现了等高的效果。