Floating + Clearing
The float property can be used to direct text around an image AND/OR can help create multicolumn layouts.
To enclose floated elemnents there are three mains ways:
- Add overflow: hidden to the parent element (overflow: hidden;)
- Float the parent too
- Add a non-floated clearing element
The clear property stops certain elements from moving next to a floated element
The Position Property
The position property determines where an element box is positioned and how it would appears. There are four different postion values:
- Static: elements appear in the normal flow (stack on top of eachother)
- Relative: move an element to a specifc location (top-right)
- Absolute: removes an element from the flow (element still cannot be seen when scrolling past)
- Fixed: removes an element from the flow (element does not move, stays in place where it can be seen)
Backgrounds
There are many different values that can be used when developing the background including:
- background-color
- background-image
- background-repeat: y, x, none, etc.
- background-position
- background-size: 50%, 100px, cover, contatin, etc.
- background-attachment: scroll + fixed
- background (shorthand)
- background-clip, origin, and break (not well supported)
Key words can also be used in the background to postion the element.