html - 流动一个 float 的 Div 围绕另一个设定高度的 Div

Question

假设我有两个 div，一个向左浮动，一个向右浮动，右侧 float 的 div 具有设定的高度。如果高度增加到该点，我希望左侧 float div 中的内容填充右侧 float div 下方的空间。

我不确定这是否是正确的方法，所以请告诉我是否有更好的方法。一些搜索让我有可能使用表格(？)，但我不确定。

.A {
  float:left; 
  height: 50%; 
}
.B {
  float:right;
  height:200px; 
  width:50%;
}

<div class = "A">
  Content of Unknown Height Will Go here
</div>
<div class = "B">
  Contact Information Box
</div>

到目前为止，我只有两个并排 float 的 div，左侧 div 的内容向下延伸得更远。

Answer 1

只是不要 float 左侧元素，而是将其放在右侧 float 元素之后:

#left {
  height: 200px;
  background: #B5E61D;
  border: 5px solid;
}
#right {
  float: right;
  background: #FF7F27;
  height: 100px;
  width: 100px;
  border: 5px solid;
}

<div id="right">Right floated div</div>
<div id="left">Left non-floated div</div>