There are often a bit of mystery on how CSS float work and how they are rendered. Float is a CSS property with the values left, right, none, or inherit. When the property is not set, the value is inherited from the parent element.
When the property is set to none, the element is rendered according to the normal flow on the page. For inline elements, such as strong, em, and span, the content is rendered on a line of text. For block elements, such as ul, and div, it is rendered with a line break, then the content of the element.
For example, the following code fragment contains two non-float div elements and produces the figure that follows.
When the float property is set to either left or right, the element is taken out of the normal flow, and content that flow normally will wrap around the element.
For example, in the following code fragment, the first div floats left, so the second div, which is non-float, wraps around the first one.
To illustrate this point further, when a float element is nested inside a non-float element, it is taken out of the layout of the parent element. However, when both the child and the parent are floats, the child is not take out the flow of the parent as shown below.
Keep in mind though, the order of the elements matter. Let’s say two sibling elements, A and B, with the same parents. A is a float and B is a non-float. B’s content would only flow around A if, A’s HTML tags comes before B’s HTML tags in the source code.
The first code fragment below has a float element that comes after a non-float element, which produced the result on the left. Whereas, the second code fragment has a float element that is place before the non-float element, which produced the result on the right.