CSS parent class clear floating reason

Floating factors are often applied to static Web pages, for example, to allow block-level elements to be exclusive to one line, often using the float method. However, when applied, it is found that when the subclass floats, the parent class is not cleared to float, which causes the problem:

1. Floating elements will float relative to the parent container or the previously positioned elements, floating elements out of the document flow, i.e. no longer occupying the original position, affecting subsequent elements or the parent container .

2. The parent container normally expands automatically, but the child element is not preserved when it is added to the floating position, and the parent container feels that it does not exist, so it does not widen.

Therefore, when writing a static Web page, be sure to pay attention to the floating cleanup problem, a clear floating code can be easily called:

. clearfloat:after{content: ';　　　　　　　　　　　　　　　　Display:block;　　　　　　　　　　　　　　　　height:0;　　　　　　　　　　Visibility:hidden;} . clearfloat{Zoom:1;}