一个容器内两个浮动盒子保持底部平行

有时候会遇到这种问题，父容器内有一个左浮动盒子一个右浮动盒子，因为内容来源接口数据所以两个盒子都不能定高，高度都不限制但是却需要底部对齐，如何实现呢？

<div class="main">
  <div class="left"></div>
  <div class="right"></div>
</div>

显示结果如下

如何实现底部对齐呢，只需在子盒子加上以下代码，父盒子需要加上【overflow：hidden】

   padding-bottom: 500px;
   margin-bottom: -500px;

500是不定值，如果两个盒子高度差可能相差500这个值是无效的，所以我们取值应该比两个盒子高度差更大，根据自己需要定大小

最后样式如下

 .left{
    width: 100px;
    height: 50px;
    background: green;
    float: left;
    padding-bottom: 500px;
    margin-bottom: -500px;
  }
  .right{
    width: 100px;
    height: 100px;
    background: yellow;
    float: right;
    padding-bottom: 500px;
    margin-bottom: -500px;
  }

效果如下