When you apply float css style, the object that flows is completely removed from the normal element flow. For instance if you apply float to an element and start to write a paragraph from the top of the document proceeding to the bottom the float element will just float there is it does not exist in the page.

Elements are floated horizontally, this means that an element can only be floated left or right, not up or down. The floated elements pushes all the other horizontal elements around the floated element.

It represents kind of isolation which can’t be reached no matter what

A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.

The elements after the floating element will flow around it.The elements before the floating element will not be affected.

If an image is floated to the right, a following text flows around it, to the left:

You will often see the attribute clear in use. The clear attribute removes the float, so when you want again to position elements, to have the elements in the flow then use clear.

The elements which are do not have clear will be pushed by the floated element as long as the non-floated elements match the height of the floated elements. After they leave the floated scope they will automatically gain the attribute clear.

Best video of CSS-Float ever: Click here


Static: the default position of an element, object, the normal position

Fixed: primarily used for navigation (scroll up-down) purposes, an element which is fixed positioned stays there no matter how much you scroll your page

Absolute: absolute positioning allows you to remove an object from the typical flow of the document and place it at a specific point on the page. When applying this property you must specify the left or top or bottom or right position, without it, it won’t work. Absolute position starts from the upper left corner (BUT THIS IS NOT TRUE, ATCTUALLY IT IS COMPLETELY FALSE!) throughout the document depending where you want to place your object. When something has absolute positioning applied, it neither affects nor is affected by other elements in the normal flow of the page. We do this with the top, bottom, left and right CSS properties.

Normally you use absolute positioning when you want your elements which will be absolutely positioned, you want it out of the normal flow.

Relative: relative positioning works similarly to absolute positioning in that you can use top, bottom, left and right to scoot an object to a specific point on the page. The primary difference is the origin or starting point for the element. As we saw above, with absolute positioning, the starting point was at the very top left of the browser window. The origin also known as the starting points depends on the position of the object where it would normally be (normally be means that position: static is applied or no position is applied