Search code examples
csscss-floatcss-positionclearfix

Why can you clear floating elements but not absolutely positioned elements?


So, if you add float: left; to an element it is taken out of the flow right? And as far as I know this is also the case with position: absolute; so how is it that you can clear floated elements with a clearfix, but you can't do anything about absolutely positioned elements? What is the difference in how each are removed from the content flow?


Solution

  • No, floating elements are not taken completely out of the flow like absolutely positioned elements are, they are just promoted to the elements that other content flow around. The original use of floating elements was for example an image in an article; by floating the image the text in the article would flow around it.

    Note: a clearfix is not used to clear floating elements, it's used to contain floating elements inside another element. To clear floating elements you simply use the clear style.