DIGI 220 - CSS Layout Part 3: Floats

VIU Media Studies Department - Robin Davies

Lecture Overview

  • The Float Property
  • Floating Rules
  • Negative Margins' Encore
  • Clearing

Float Property

  • float causes an element to move to one side of its parent element's content area
  • A floated element is taken partially out of the natural flow of the document, and positions itself as high, and as far to one side, as possible
  • Content which follows flows around the floated element
    • float: left | right | none | inherit;
    • The default value is none
  • Examples

Float Directions

  • The direction of your float value applies to the element you're floating, not what flows around it
  • float: right;
  • will cause whatever it is applied to to move to the right of its parent element's content area
  • Any elements following the floated element will flow around it, on the left
  • Be sure to place the element you want to float directly before the content you want to flow do the flowing (HTML source order)

Float Details

  • Note: float is well-supported by contemporary browsers
  • Note: float is not inherited
  • Note: margins around floated images do not collapse
  • A replaced element (such as img) which has been floated retains its intrinsic width
  • However, non-replaced elements (i.e. text) should have a value assigned for width; otherwise unpredictable results can follow
  • floating an element will reset its display to block

Containing Block

  • A floated element's containing block is its nearest block-level ancestor element
  • For example, if we put an img inside a div and then float the img, the div is the img's containing block
  • The img's display property is set to block, even though it's an inline element.

Float Rules

There are a set of rules that describe how a floated element should behave. Essentially, we can simplify these rules like this:

  • A floated element wants to be as high and and far to the indicated direction as possible
  • If forced to choose, it will prefer height to its indicated lateral direction
  • Floated elements must stay within their parent element's containing box (unless negative margins are in effect)
  • Floats may not be higher than the top of floated or block-level elements that appear before them in the HTML document

Float Bottoms

  • One area not addressed in the rules is the bottom of floated elements.
  • If a floated element is taller than its parent, it is permitted to stick out of the bottom of the parent element.
  • This isn't necessarily the behaviour we're looking for

Negative Margins

  • Negative margins can cause floated elements to move out of their parents' containing boxes.
  • While this might seem counter-intuitive, it is similar to other negative margin behaviour.
  • The rules stated previously are being followed, because the outer edge of the image stays within the parent element, but the negative margin moves the content outside the parent element.
  • All four sides of a floated element can have negative margins.
  • Example

Clear

  • Use the clear property to ensure that an element won't have things floating on one or both sides
  • The clear property stops the affected element from displaying until the designated side or sides are free of floating elements
  • clear is particularly useful if you have a floated element which is longer than the content which flows around it
  • Clear has four values:
    • clear: left | right | both | none ;
  • none is the default value

Grids with Float

  • The float property is a quick and effective way to create flexible, reliable grid structures in CSS
  • Floats can be tricky to master because of the tug-of-war between the natural flow and the float's desire to follow the float rules
  • However, once you've mastered floats, you will find they are almost endlessly useful in CSS layouts
  • Grid Example

Floating for Layout