CSS Universal Purge principle

If there is a way to clear the float now, but not in the document more than one unused empty tag, then the effect is the best!
Introduced: after pseudo element selector, you can add the last child element to the contents of the specified element

. container:after{

}

How do I write content? ---->content property, write content

So

. container:after{
Content: ".";
}

The content that was just written is the inline element, and the clean float must be a block Object!!

So,--->display, convert inline elements to block-level elements

So

. container:after{
Content: ".";
Display:block;
}

Of course, you also need to add the Clear:both attribute to clear the float, so

. container:after{
Content: ".";
Display:block;
Clear:both;
}

Problem, the added content can also be rendered in the page effect, so the height is cleared to zero

. container:after{
Content: ".";
Display:block;
Clear:both;
height:0;
}

Although the height is clear to zero, but the text is still displayed, in fact, now the text has exceeded the size of the container, now only need to hide the overflow of the part can be

So
. container:after{
Content: ".";
Display:block;
Clear:both;
height:0;
Overflow:hidden
}

This enables the ability to clean up floats, but not a single empty tag in the document

CSS Universal Purge principle