html中设置父盒子的高度,【CSS】设置浮动元素高度等于父元素

最近在练习中发现了这样一个问题：

红色边框为没有设置高度的父元素(.parent)，两个子元素(.left,.right)都设置为左浮动，父元素被右边的元素(.right)撑开。现在我想让左边的元素(.left)高度与父元素相同。

目前效果

期望效果

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

height = 100%;

但是并没有什么用。

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

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

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

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

意外情况

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

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

具体代码如下

right

left

.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;

}