css三列布局（一）

这就是一个三列等高布局的效果，运用了padding补偿法，先上代码：
dom结构：

<div class="container">
    <div class="left">
        fefwefew
    </div>
    <div class="center">
        wefwefwe
    </div>
    <div class="right">
        <p>ewtfrweqrferq</p>
        <p>ewtfrweqrferq</p>
        <p>ewtfrweqrferq</p>
        <p>ewtfrweqrferq</p>
        <p>ewtfrweqrferq</p>
    </div>  
</div>

css代码

.container{
    width: 1000px;
    margin: 50px auto;
    overflow: hidden;
}
.left,.center,.right{
    float: left;
    width: 333px;
    padding-bottom: 10000px;
    margin-bottom: -10000px;                
}
.left{
    background: red;
}
.center{
    background: yellow;
}
.right{
    background: green;
}

下面我们来谈一下原理，我们需要明白的是overflow:hidden;是根据什么来界定的，也就是说怎么样就算超出了这个容器呢？（这里所指的是没有指定容器的高度）根据的是容易内元素的外边距，看上面的代码，我们首先给三个子div增加padding-bottom，使整个盒子的高度增加，于此同时，三个子div的外边距也在很远很远的位置，所以我们需要将margin-bottom给拿上来，于是我们就做了一个正负相抵的操作，这时我们的right的底部外边距与其本身content area在同一基线上，也是由于right的底部外边距的这条基线位于最底部，所以父div进行overflow后得到我们想要的三列等高效果。