我可以使用CSS浮动实现这种布局吗？

Question

就像我在职业生涯中遇到的许多前端开发人员一样，我在熟练程度上理解HTML，CSS和JavaScript，但CSS浮动的细节仍然是我的致命弱点。

我最近的项目有一个简单的布局，看起来像是一个完美的候选人，可以提高我对花车的理解。用绝对定位来实现它是微不足道的，但我想确定浮点数是否能达到同样的效果。

这是所需布局的简化模型：

我将JSBin示例设置为一个很好的起点：

http://jsbin.com/UPUzUWU/1/edit?html,css,output

我花了大约20分钟来玩弄浮动的盒子，它们是如何浮动的，清除的，清除方式，甚至HTML的排序。我已经接近了，但没有雪茄。

是否有人能够在不诉诸绝对定位的情况下完成这项工作（如果需要，可以重新排序HTML）？如果是这样，您是否也可以尽力解释其背后的原理？

谢谢！

---

修改

对不起，我应该澄清一下 - 虽然重新排序框的HTML很好，但我不想将多个框组合成共同的父元素。请假设在语义上，这些都将内容保持在布局层次结构的同一级别（即，它们都是语义兄弟），因此理想情况下，它们不会共享仅为了简化样式而存在的非语义父元素。

此外，该方法允许简单地浮动三个元素，这是一个太基础的解决方案，可以更好地了解浮点数的工作原理。

Answer 1

此处：http://jsbin.com/UPUzUWU/11/edit

 <div class="box-holder">
    <div class="vertdiv">
     <div class="box box-1 box-square">1</div>
     <div class="box box-2 box-square">2</div>
    </div>
    <div class="box box-3 box-tall">3</div>
    <div class="vertdiv">
      <div class="box box-4 box-square">4</div>
      <div class="box box-5 box-square">5</div>
    </div>
 </div>

<强> CSS

.vertdiv{
   float:left;
 }

 .box-tall {
   float: left;
   height: 200px;
 }

使用百分比： http://jsbin.com/UPUzUWU/13/edit

<强> CSS

.box-square {
   width:100%;
   height: 50%;
 }

 .box-tall {
    float:left;
    height: 100%;
    width:34%;
 }

 .vertdiv{
   float:left;
   width:33%;
   height:100%;
 }

Answer 2

这是全高度＆amp;宽度和完全响应的解决方案：http://jsbin.com/upAFigEp/2/edit

Answer 3

看看这个JsFiddle。

    .box-holder {
  width: 300px;
  height: 200px;
  background-color: #fff;
  position: absolute;
}

.box {
  width: 100px;
  float: left;
}

.box-square {
  height: 100px;
}

.box-tall {
  height: 200px;
}

.box-1 {
  background-color: #eee;
  float:left;
}

.box-2 {
  background-color: #ddd;
    float:left;
    position: absolute;
    top: 100px;
}

.box-3 {
  background-color: #ccc;
}

.box-4 {
  background-color: #bbb;
}

.box-5 {
  background-color: #aaa;
}