聲明：以下均爲個人見解，若有錯誤請指出。
效果預覽：
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
}
.container {
width: 400px;
overflow: hidden;
background-color: pink;
}
.left {
float: left;
width: 200px;
background-color: silver;
padding-bottom: 100px;
margin-bottom: -100px;
text-align: center;
}
.right {
float: left;
width: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="container">
<span class="left">我在左側</span>
<span class="right">我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</span>
</div>
</body>
</html>
實現機制：
left元素高度根據右側文字的高度進行自適應。利用padding-bottom正值和margin-bottom負值相互抵消。
當父元素設置overflow: hidden時產生的影響：
（1）觸發bfc，使的父元素的高度在計算時包括float元素的高度，子元素left和right的高度中的最大者決定了父元素的高度。此處父元素的高度即爲right元素的高度。
（2）left元素中由於背景色可以作用在padding中，而超出right元素高度部分的padding會被父元素設置的overflow: hidden截斷。
（3）left元素的margin-bottom抵消掉padding-bottom部分，使得父元素在檢測高度時發現左側的高度低於右側的高度，因此父元素的高度會與right的高度一致。
當修改margin-bottom的值爲-40px時產生的效果：
此時父元素在檢測高度時發現左側高度高於右側，因此父元素的高度就等於左側元素的高度。
注意點：事實上第一種情況中left元素的高度(元素框尺寸)等於padding + 文字的高度，其高度要遠高於right元素的高度，但是由於父元素中的overflow: hidden，導致對於父元素來說，left元素的高度只有文字的高度，padding部分會被margin抵消掉。也就導致爲什麼父元素的高度是right元素的高度而不是left元素的高度。