【CSS】设置浮动元素高度等于父元素

最近在练习中发现了这样一个问题：
红色边框为没有设置高度的父元素（.parent），两个子元素（.left,.right）都设置为左浮动，父元素被右边的元素（.right）撑开。现在我想让左边的元素（.left）高度与父元素相同。

目前效果 期望效果

起初我将左边的子元素（.left）高度设置为100%，即

height = 100%;

但是并没有什么用。

想了各种办法都不能解决，后来想到可以用js，即

$('.left').css('height', $('.right').innerHeight());

但是用js来解决定位问题太大材小用，也不符合规范。

几经周折，在网上找到了解决办法——用绝对定位。但是，如果简单地把左边的子元素设置为绝对定位，会出现这样的情况： 意外情况

因为左边的子元素被设置为绝对定位，已经脱离了正常的文本流。

这里把左边的子元素再包裹一层，设置.left-warp为绝对定位。此时发现.left与.right的位置反了，所以在html代码中将两个子元素的位置对调，再把他们设置为右浮动，这样就达到了要求。

具体代码如下

<div class="parent clearfix">
    <div class="right">
        right
    </div>
    <div class="left-wrap">
        <div class="left">
            left
        </div>
    </div>
</div>

.parent {
    width: 300px;
    border: 2px solid red;
    margin: 30px auto;
}
.clearfix:after {
    content: " ";
    display: block;
    clear: both;
}
.left, .right{
    text-align: center;
}
.left-wrap {
    float: right;
    width: 100px;
}
.left{
    position: absolute;
    width: 100px;
    background-color: pink;
    line-height: 200px;
}
.right{
    width: 200px;
    height: 200px;
    float: right;
    background-color: lightblue;
    line-height: 200px;
}

参考：
https://stackoverflow.com/questions/3049783/how-to-make-a-floated-div-100-height-of-its-parent