Могу ли я достичь этого макета с помощью поплавков CSS?

Question

Как и многие разработчики интерфейсов, которые я встречал в своей карьере, я понимаю HTML, CSS и JavaScript на уровне профессионалов, но более тонкие точки плавающих CSS по-прежнему остаются моей ахиллесовой пятой.

Мой последний проект имеет простой макет, который выглядит как идеальный кандидат для улучшения моего понимания поплавков. Это достигается тривиальным путем с абсолютным позиционированием, но я бы хотел определить, могут ли поплавки выполнить то же самое.

Вот упрощенный макет требуемого макета:

Я настроил пример JSBin хорошей отправной точкой:

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

Я провел около 20 минут играя вокруг, с которыми плавают поля, как они плавают, которые очищаются, как они очищаются и даже упорядочиваются HTML. У меня вроде как близко, но нет сигары.

Может ли кто-нибудь выполнить эту работу, не прибегая к абсолютному позиционированию (при необходимости переупорядочивание HTML в порядке)? Если да, можете ли вы также сделать все возможное, чтобы объяснить принципы, лежащие в его основе?

Спасибо!

---

Edit:

К сожалению, я должен уточнить - в то время как изменение порядка 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

Вот полная высота & ширина и полностью отзывчивым решение: 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; 
}