Float на HTML елементи

Oт всички CSS пропъртита за изграждане на Т layout можеби най-важното за усвояване е “флоутването” на елементи. То ни позволява да позиционираме елементи в лявата или дясната част на техния родител.Нека започнем с един прост пример.
HTML

И съответно CSS

localhost 8080

Да зададем float на

localhost 8080

Както виждаме дивът отстъпи от нормалната си позиция и се премести е дясно. Очакван сценарий :-) . Но нека обърнем внимание на втория див забелязваме, че той също отстъпи от нормалното си положение и зае пространството което преди това заемаше първият див.
Другo не много очаквано поведение е ако “флоутнем” първия див в ляво.

localhost 8080

bad thing happened :-)

Изглежда, че вторият див магически изчезна. Но всъщнос не е така тъй като ние променихме нормалното състояние на първия див вторият просто е заел празното му пространство и фактически се намира под него.
Следва……