As previously I was asked for several times: “why float is displayed wrong?”, I decided to write this note, which would explain typical situations a beginning coder runs into, and when someone asks me again simply to give a link to this article.
Disclaimer
I am not a professional coder, although on the sort of my activity I had to code several dozens of sites. I have friends who learn how to code and I want to help them. Most likely, you also have such friends. The aim of this article is not telling about something new, but telling about old from the point of view of problems that the beginning coders often collide with. I do not apply on absolute truth of the words, and in case you have any good ideas I will be very glad, if you’ll correct and supplement me.
Properties of element with float, which you should always keep in mind
(if it is set in the value of left or right)
• An element is displayed as a block, so as if display: block property was set to it;
• The width of an element compresses to the sizes of content, if a width of an element is obviously not set;
• An element sticks to the left (left) or right edge (right);
• All other content of a page, in HTML code after an element with float, flows around it.
Incident from life #1
I have two blocks, I applied float: right to one of the blocks, it aligned on a right level, but however remained under the first. The example of how it looks.
The cause
If it happened so, it means you applied float not to the first, but to the second block. By virtue of the fact that floating (that which with float) element is flowed around only with those elements which are after it in HTML code, the first block will not flow it around.
Similarly the block elements, by default, have a maximally possible width (prove) within the limits of parent. Your floating element is not simply placed on one line with the first sectional elements with a maximal width, therefore it is being displaced downwards.
Solution
Change blocks’ places in HTML code, put a block with float on the first one.
Incident from life #2
I have two blocks in header/content/footer. I did float: left to one of them, and float: right to another. But after it all site’s content was displaced.
The cause
Blocks with float, by default, do not influence on the height of parent, that is if you have some container, and there are only floating blocks in it, then the height of container will become equal to zero. The example of how it looks.
Similarly all content of a site, which is in HTML code and follows after floating elements, flows around them, that often results in an unexpected effect.
Solution
Solution #1. Obviously to set the height of container. In those cases, when the sizes of container are known, this is the simplest decision.
Solution #2. To add an empty block with clear: both. Addition of similar element clears the “floating” of blocks and compels a container to stretch on all height. Semantically this is not the best decision, because it inserts the superfluous element of marking.
Solution #3. To apply property of overflow: auto (or hidden) to the container. Compels a container all over again to calculate the height and to change it so that it included floating elements, otherwise it would have to add a scrollbar or hide them. However, sometimes it happens, therefore be careful.