DIGI 220 - CSS Layout Part 3: Floats
VIU Media Studies Department - Robin Davies
- The Float Property
- Floating Rules
- Negative Margins' Encore
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
- The direction of your float value applies to the element you're floating, not what flows around it
- 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)
- Note: float is well-supported by contemporary browsers
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
- 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
div is the
img's containing block
display property is set to
block, even though it's an inline element.
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
- 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 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.
- Use the
clear property to ensure that an element won't have things floating on one or both sides
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
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