Как управлять float?

Question

[Станислав Григорьев]

Начал свой путь в верстке сравнительно недавно и float для меня не очень понятен. Есть некое тестовое задание позиционировать блоки исключительно свойством float. Подскажите куда можно посмотреть, везде только про то как текст классно обтекает изображение.

Comments

[Rustam Bainazarov]

Посмотрите, как сделан Bootstrap 3.X и почитайте про clearfix. Это вполне неплохой способ понять float'ы.

[Станислав Григорьев]

SmthTo, Спасибо, но clearfix уже, к сожалению, не свойство float

[Rustam Bainazarov]

Станислав Григорьев, такого свойства и нет. Это несколько свойств, без которых невозможен layout на float'ах.

[Станислав Григорьев]

SmthTo, понял, спасибо!

Answer 1

[alex]

У меня проблема с 3 и 6 положением:

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

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

.test {
  display: inline-block;
}

тогда 3 и 5 вариаты будут выглядеть так:

// 3
<div class="wrap oh">
  <div class="test fl">1</div>
  <div class="test no">2</div>
  <div class="test fr">3</div>
</div>

// 5
<div class="wrap oh">
  <div class="test no">1</div>
  <div class="test fr">2</div>
  <div class="test fl">3</div>
</div>

Comments

[Станислав Григорьев]

т.е. это условие никак нельзя соблюсти:

Имея консткрукцию такого вида нужно поменять местами дивы, используя только св-ва float. Дополнительные обертки не допускаются.

?

[alex]

Станислав Григорьев, вот кто то тоже пытался сделать что и вы

[Станислав Григорьев]

Alex, забавно :)

Answer 2

[Сергей Лещенко]

Для первого кейса стили будут такие

.fl {float:left}
.fr {float:right}
.no {float:left}

Для остальных в таком же ключе эксперементируйте

Comments

[Станислав Григорьев]

Вы наверное не так поняли мою задачу, css статичен.
У меня проблема с 3 и 6 положением:

На такое
1 3 2 
2 3 1 
2 1 3 
3 2 1 
3 1 2