问题:

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?

回答1:

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.

回答2:

Floated elements also are either right or left of the parent node, but can't be just ten pixels below the top with top: 10px; like absolute positioned elements. They always remain in some way connected to the flow, what makes it possible to use the clearfix.