Обтекание css, как работает float?

Question

[Сергей Марченко]

https://jsfiddle.net/n1u0twc1/

Блок "block-right" и "block-content" находятся в "block-body", собственно к блоку "block-right" применил float: right;
Но при применение в блоке "header-top-block2" с блоками "header-top-block-logo" и "header-top-block-logo2" не работает, точнее вылезает за пределы "header-top-block2"
Как "header-top-block-logo2" поставить на место вправо? И почему в одном случае правильно, а в другом не правильно?

Answer 1

[Алексей Уколов]

Свойство float отвечает за то, с какой стороны другие элементы будут обтекать тот, к которому оно применено. В вашем случае, рядом с .header-top-block-logo2 только .header-top-block-logo, а это блочный элемент, он ничего обтекать не умеет.

Вы, в общем-то, на верном пути - вам действительно нужно разобрать как работает float (ну и вообще поток страницы), на эту тему за годы использования этого кривого костыля метода написано множество статей.

Comments

[Сергей Марченко]

А почему тогда я к блоку block-right применил float: right; и он встал как нужно?
В коде одни блоки же.

[Алексей Уколов]

Сергей Марченко: потому, что .block-right стоит до .block-content, вот контент его и "обтекает" (хотя на самом деле вовсе и нет). Ещё раз - почитайте про поток страницы и float, это необходимая база для верстальщика.

[Сергей Марченко]

Алексей Уколов: Упс, я просто перепутал порядок. Поставил к header-top-block-logo и он стал "обтекать". Значит это ложное обтекание и делать так не нужно?

[Сергей Марченко]

Точнее float нужно использовать допустим для текста, а для расположения блоков нет?

[Алексей Уколов]

Да, вы правильно уловили смысл. Иногда без float при позиционировании не обойтись (но такие случаи в моей практике можно на пальцах одной руки пересчитать), но его можно использовать только тогда, когда вы четко понимаете, что происходит с вашими блоками. Если использовать его без глубокого понимания потока страницы, кому-то в какой-то момент будет очень-очень грустно.