Floatmania: Explaining how the floss css property works

After I was asked the sixty-eighth time why the block with the float is displayed incorrectly, I decided to write this note, which would explain the typical situations that a novice layout man faces, and also just to give a link to this article next time.

Disclaimer

I am not a professional coder, although by the nature of my work I had to impose more than a dozen sites. I have friends who learn to type and I want to help them. Most likely you have them. The purpose of this article is not to tell something new, but to tell about the old from the point of view of the problems most often encountered by novice layout makers. I do not pretend to the absolute truth of my words, and I will only be glad if you correct and supplement me.

Item properties with float that you should always keep in mind

if it is set to left or right

• The element is displayed as a block , as if the display: block property is set;
• The element width is compressed to the size of the content, if the element is not explicitly set the width;
• The element sticks to the left (left) or right edge (right);
• All the rest of the page content, going in the HTML code after the element with a float, wraps around it;

Life Case # 1

I have two blocks, I applied float: right to one of the blocks, it was right aligned, but still remained under the first one. An example of how this looks.


')

Cause

If this happens, then you have applied the float not to the first, but to the second block. Due to the fact that the floating element (the one with the float) element wraps around only those elements that appear in the HTML code after it, the first block will not flow around it.

Also, block elements by default have the maximum possible width ( proof ) within the parent. Your floating element simply does not fit in line with the first block elements with the maximum width, so it is pushed down.

Decision

Swap the blocks in the HTML code , put the block with the float first.

Life Case # 2

I have two blocks in header / content / footer. One I made float: left, the other float: right. But after that, the entire contents of the site floated.

Cause

Blocks with float by default do not affect the height of the parent, that is, if you have a container, and there are only floating blocks, then the height of the container will be equal to zero. An example of how this looks .

Also, the entire contents of the site, which goes in HTML code after floating elements, flows around them, which often leads to an unexpected effect.

Decision

Solution # 1. Explicitly set the height of the container . In those cases when it is known what the size of the container should be, this is the simplest solution.

Solution # 2. Add an empty block with clear: both . Adding such an element cleans the "buoyancy" of the blocks and causes the container to stretch to full height. Semantically, this is not the best solution, as it introduces an extra markup element.

Solution # 3. Apply the overflow: auto (or hidden) property to the container . Causes the container to re-calculate the height and change it to include floating elements, otherwise it would have to add a scroll bar or hide them. However, sometimes it happens, so be careful.

UPD
Also read an interesting article from SelenIT2 as a continuation of the discussion of the float property.