Block:
Inline:
Float:
Problems with float:
content: "";
display: block;
clear: left;
}
This will draw a boundary between floated elements in the parent element and non-floating elements. This will create a virtual 'boundary'. Without this, the new element coming after parent element will be in the location of parent element. This will add an additional space to the parent element to its bottom. Apply this clearfix class to the parent (enclosing) element so that you don't have elements overlapping and flying around.
Position:
- It gets everything off the way (elements with same inline).
- It fills all the empty spaces with margin.
- if no width set, there's going to be a width equivalent to content-width.
- it has a set area.
- If and only if it is block, you can set width, height, padding (top & bottom), and margin(top & bottom).
Inline:
- Non-floating elements cannot 'recognize' floating elements. Floating elements can see each other, and non-floating ones can each other. But inline elements are able to see everything.
Float:
- For landscape presentation. If there are three elements in just one parent element and one element has got a float, it will be able to move independently of the parent element.
- It basically 'floats' the element off the parent element. So other elements in the parent element will not be affected, because the floating element will be literally floating on the parent element and the subordinate (child) elements. But it is going to stay in the boundary of the parent element!
- At the time an element becomes a float, it obtains a block property (it can behave in its own way). For example, it can disobey the width of the parent element, and instead set its own width.
- You don't have to use float for centering. Use margin instead.
Problems with float:
- Overflow. Just do overflow: hidden.
- Or do clear: both. Clear: left means 'to the left side of this element'.
- or do:
content: "";
display: block;
clear: left;
}
This will draw a boundary between floated elements in the parent element and non-floating elements. This will create a virtual 'boundary'. Without this, the new element coming after parent element will be in the location of parent element. This will add an additional space to the parent element to its bottom. Apply this clearfix class to the parent (enclosing) element so that you don't have elements overlapping and flying around.
Position:
- The default position of elements is static: .
- Relative: it sets the element to the location where it would be in the first place. You can use top, left ... and margin easily.
- Absolute: it gets out of the parent element. Its default location will be stuck to the FIRST outer element that does not have position: static.