Float is a CSS property for placing HTML elements side-by-side. This property is used for creating a columned page layout, amonst other things. This property can have an affect on elements in the HTML document that is non-desirable. This guide attampts to explain how float works, its affect and how to override it.
Download a pdf excercise file based on these examples here.
The default arrangement of block elements in the page, without float assigned, in the order they appear in the HTML code.
With the CSS property of float:left; applied, block elements become arranged next to each other in the order they appear in the HTML code.
float:left;float:left;float:left;With the CSS property of float:right; applied, block elements become arranged in the reverse order to which they appear in the HTML code.
float:right;float:right;float:right;"narrow column"
float:left;
This element is inserted before the "wide column" in the HTML and has the CSS property of float:left; applied to it. This element is inserted before the "wide column" in the HTML and has the CSS property of float:left; applied to it. This element is inserted before the "wide column" in the HTML and has the CSS property of float:left; applied to it. This element is inserted before the "wide column" in the HTML and has the CSS property of float:left; applied to it.
"wide column"
This "wide column" block element is inserted after the "narrow column" in the HTML. It has moved up as if the "narrow column" element is no longer in the document. This is indicated by the grey background extending across and behind the "narrow column". The content in the "narrow column" is forcing the content in this block element into the remaining space.
"column"
float:left;
This element is inserted before the "wide column" in the HTML and has the CSS property of float:left; applied to it. This element is inserted before the "wide column" in the HTML and has the CSS property of float:left; applied to it. This element is inserted before the "wide column" in the HTML and has the CSS property of float:left; applied to it. This element is inserted before the "wide column" in the HTML and has the CSS property of float:left; applied to it.
"wide column"
clear:both;
This block element is clearing any floats preceeding it in the document and now sits beneath the content in the "narrow column", in the way that one would expect. This is achieved by assigning the property of clear:both; to the "wide column". The value of 'both' prevents any left or right floats affecting the element.
This shows a block element containing content (in this case, two block elements). Floats have not been applied.
A block element will collapse if it contains content that is floated. This is because the floats remove block element behaviour from the content. In turn, this makes the containing block element behave as if the content inside has no depth.
The containing element still holds the content in place. It is as if the content is like washing hanging from a line.
A common method of extending a container around floated content is to use an element inserted after the content with a property of clear:both;. In a layout, this function would often be performed by an element such as a footer.
clear:both;