两列等高布局

<style>
  #dd {
    padding: 20px;
    overflow: hidden;
    border: 1px solid black
  }
  #d1 {
    float: left;
    width: 300px;
    background-color: red;
    padding-bottom: 200px;
    margin-bottom: -200px;
    border: 1px solid yellow
  }
  #d2 {
    float: left;
    width: 500px;
    background-color: blue;
    padding-bottom: 200px;
    margin-bottom: -200px;
    border: 1px solid yellow
  }
</style>
<div id="dd">
  <div id="d1">好好学习天天向上 好好学习天天向上 好好学习天天向上 好好学习天天向上 好好学习天天向上 好好学习天天向上 好好学习天天向上 好好学习天天向上 好好学习天天向上 好好学习天天向上 
  </div>
  <div id="d2">Superxuyuey</div>
</div>

overflow:hidden; 可以将超出边框的内容隐藏，而不是内边界

因为父元素的height等于子元素的7个高度值相加，即：
margin-top+border-top+padding-top+height+margin-bottom+border-bottom+padding-bottom = 父元素height

对于子元素来说padding-bottom+margin-bottom=0，所以子元素的height就等于父元素的height

但是可以看到子元素的背景超出了父元素的内容区，这是因为背景颜色默认是加在元素边框以内的区域，区域外margin的区域颜色为透明，显示父元素的背景颜色