Why Float is better than position:relative and absolute while we can make layout quickly with position?

Absolute positioning takes the element out of the normal document flow. Any absolutely positioned element is completely ignored when regarding normal elements.

This breaks in a lot of scenarios. The main one that springs to mind is putting elements underneath each other. With your column example, sure you can absolutely position 3 columns, but you can't put anything below that on the page, because the flow is still at the top of the page. The "absolute" elements do not affect where later content comes.

With floats, you just put an element afterwards and it wraps around or underneath the floating ones.

That's not to say it has no use. Positioning is very useful when you want to pop up a "layer" over the web page.

---

A short example... take this common HTML scenario:

<h2>Section title</h2>
<div class="column1">First</div>
<div class="column2">Second</div>
<div class="column3">Third</div>

<h2>Second section title</h2>
...

With floats, you'd use this CSS:

.column1, .column2, .column3 {
  float: left;
  width: 200px;
}
h2 {
  clear: both;
}

And everything would be fine. Let's absolutely position the columns instead:

.column1, .column2, .column3 {
  position: absolute;
  width: 200px;
  top: 30px; /* enough to miss the first h2 */
}
.column1 {
  left: 0;
  background: pink;
}
.column2 {
  left: 200px;
  background: lightgreen;
}
.column3 {
  left: 400px;
  background: lightblue;
}

Try this for yourself (with more content in each column) and see what happens to the second heading - it will always be right under the first one, as if the columns aren't there. Actually, the second heading would be mostly hidden by the columns since they're layered over the top of the document.

Unless the columns are fixed height then it is impossible to know where to put that heading below the columns. It's even worse if you want more columns under each heading.

Honestly, just give it a try and attempt a nice layout using absolute positioning. You'll soon understand its failings.

Float is not better than Position, and Position is not better than Float - both should be used in the correct situation. I would recommend you read the book http://www.transcendingcss.com/ if you want to learn more about when to use which one, and CSS styling in general.

See here for an example: http://transcendingcss.com/blog/about/changingman_layout_updated/

Absolute : your element is positioned to the first parent element with a position other than static (it must be explicit, even if the default position is relative)

Relative : your element is positioned to its last sibling with a relative position

Float : for instance if it's left, your element will move as far as it can to the left (depending on other element and its width, the elements before won't be affected, the elements after will flow around it.

Ref:

http://www.w3schools.com/css/css_positioning.asp

http://www.w3schools.com/css/css_float.asp