html - 我可以使用 CSS float 实现这种布局吗？

Question

就像我在职业生涯中遇到的许多前端开发人员一样，我对 HTML、CSS 和 JavaScript 的理解程度很熟练，但 CSS float 的更细微之处仍然是我的致命弱点。

我最近的元素有一个简单的布局，看起来非常适合加深我对 float 的理解。用绝对定位实现是微不足道的，但我想确定 float 是否可以实现同样的目标。

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

我设置了一个 JSBin 示例作为一个很好的起点:

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

我花了大约 20 分钟研究了哪些框是 float 的，它们是如何 float 的，哪些是清除的，它们是如何清除的，甚至是 HTML 的顺序。我有点接近了，但没有雪茄。

有没有人能够在不求助于绝对定位的情况下完成这项工作(如果需要，重新排序 HTML 是可以的)？如果有，能不能也尽量解释一下背后的原理？

谢谢!

---

编辑:

抱歉，我应该澄清一下 - 虽然重新排序框的 HTML 很好，但我不想将多个框组合到公共(public)父元素中。请假设在语义上，这些都将内容保存在布局层次结构的同一级别(即，它们都是语义兄弟)，因此理想情况下，它们不会共享仅用于简化样式的目的的非语义父元素.

此外，该方法允许简单地向左浮动三个元素，这是一种过于基本的解决方案，无法进一步阐明 float 的工作原理。

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%;
 }