css floating Clear

There are two methods commonly used

overflow

Overflow elements used within parent: hidden attributes, sub-elements to clear float

Do not use overflow: when hidden:

Blue ul, li float because pink, and blue pink ul li hold up losing height, therefore shrink up

Use overflow: when hidden:

Pseudo-class: after

This is a more commonly used method, pseudo-classes may be added to the parent element to clear the float. But there is a better way,

A pseudo class defined directly added to the parent element. Here the reference to bilibili class clearfix

In fact, this principle is to use an empty label use clear: both to clear the float. Pseudo-class: after final will load a label within the last position of elements, of course, you can also be defined directly on the parent class: after pseudo-class.

eq：

Added: At first he thinks this approach is not very clear float necessary, because now unlikely to page layout with a float,

Now basically using flax property layout. But taking into account the relative positioning of the elements after or absolutely positioned internal to cloth

Any old office will use to float, and therefore had to dig out before the removal of floating old way