COMP1850 | CSS Float

CSS Float Properties

float - display block elements to the left or right of other content
shape-outside - advanced control over textual wrapping shapes
clear - stop non-floated content from positioing beside floated content
overflow - stop parent container from collapsing on floated child tags

Examples Of Float

Using float:left;

The best use of float is to effectively orient the wrapping of content. A floated element will position on the left or right side of its parent container, allowing text and inline elements to wrap around it.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Dei in turpis pulvinar facilisis. Ut felis.

Using float:right;

Using float With shape-outside

Greater control over how content will orient around floated items can be acheived using shape-outside

Control Behaviors Of Non Float Elements

Note how in this example the non-floated textual content can end up positioned oddly in between the floated images. Use clear on non-floated content if you want to stop if from positioing beside floated elements.

Paragraph NOT Using `clear`:

Paragraph Using `clear`:

Collapsing Parent On Floating Children - A

Examine the behaviour of this article tag when four of its children are floated. Compare this behavior to the article that follows, which also floats four of its children, but displays quite differently.

This article DOES use overflow:auto; and is able to recognize it's floated children.

Collapsing Parent On Floating Children - B

The following four floated images are children of this article. Note how they do not seem to be visually contained inside the article's box model. Floated elements are removed from the normal flow of the document, and thus the parent tag collapses on the floats: it does not recognize they are present.

This article DOES NOT use overflow:auto; and is unable to recognize it's floated children, thus collapsing.

Applying overflow:auto; to this article would prevent the tag from collapsing on its floated children. Go ahead, try it!