1

Both floated and absolutely positioned elements are taken out of the document flow. Then why does clearfix hack only work on floating elements not upon absolutely positioned elements?

user31782
  • 7,087
  • 14
  • 68
  • 143

2 Answers2

1

There is a common misconception that floats are removed permanently from the document flow.

This is not the case, floated element are removed from their standard position in the flow and shifted as far as possible to the left or to the right on their current line, depending on the specified floating direction.

W3 Spec

A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property). Content flows down the right side of a left-floated box and down the left side of a right-floated box.

A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there is a line box, the outer top of the floated box is aligned with the top of the current line box.

Floated elements affect the elements around them, absolutely positioned elements do not.

W3 Spec on Absolute Positioning

In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings).

Notice the difference?

So a clearfix (or clearance) only affects floated elements. A clearfix is not used to clear floating elements, it's used to contain floating elements inside another element.

There's a great article on CSS-Tricks which explains All About Floats and covers the differences between them and positioning.

Community
  • 1
  • 1
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • _Content flows down the right side of a left-floated box and down the left side of a right-floated box._ By _Content_ do they mean only text and images? – user31782 May 13 '16 at 11:48
  • Yep...if it can. - http://learnlayout.com/float.html – Paulie_D May 13 '16 at 11:49
  • Does it have something to do with the display type of the content? E.g. does only `inline` element flow around floated elements and block level elements treat them like absolutely position elements? – user31782 May 13 '16 at 11:55
  • Yes and no, block elements can't flow round a floated element becuase they are 100% wide by default so there isn't room for them both on the same line. – Paulie_D May 13 '16 at 12:00
  • But even if we give a certain width to a `div`, it doesn't flow around the floated element. – user31782 May 13 '16 at 12:01
  • @Paulie_D: Not exactly... in-flow blocks don't flow around floats because they're not aware of the floats, regardless of their width. Inlines do wrap around them because they are designed to be aware of floats (see the part of the spec where it mentions line boxes). It sounds deceptively simple but it is in fact what it is ;) – BoltClock May 13 '16 at 12:02
  • ...and there you are...I always bow to the greater knowledge of BoltClock :) – Paulie_D May 13 '16 at 12:03
0

FLOAT : When you float an element, The element is not taken out. Float does not removes an element from the document’s flow.

Position ABSOLUTE : When you position an element the element is take out (Placed above other elements). Absolute positioning removes an element from the document’s flow. The element given absolute positioning will no longer affect the layout of other elements in the document.

This is the best example you can understand easily : Check this

Shahil M
  • 3,836
  • 4
  • 25
  • 44
  • w3.org's official tutorial says _A floated box is taken **out** of the document flow..._ Ref: 3rd paragraph https://www.w3.org/wiki/Floats_and_clearing#How_does_floating_work.3F – user31782 May 13 '16 at 10:04
  • Sorry, for the misconception of float elements. – Shahil M May 13 '16 at 10:09