Recently in the development process, sometimes often meet clearly know the need to do so, but why do we always do not understand why.
Let's start by explaining what's called Clear float :
In non-IE browsers (such as Firefox), when the height of the container is auto, and the contents of the container are floating (float is left or right), in which case the height of the container cannot be automatically stretched to fit the height of the content. A phenomenon that causes content to overflow outside the container and affect (or even destroy) the layout. This phenomenon is called floating overflow, in order to prevent the occurrence of this phenomenon of CSS processing, called CSS to clear the float.
As defined above, when the height of the container is auto, we use float as (right | | left). The result that the parent element cannot be stretched appears.
The image is not using the floating effect, when we add a floating style (Float:left) to the item
The result is that the height of the parent element of Li is 0.
So when I use float, I usually add a fixed height to the parent element, or use the pseudo-class of after to give the element a floating effect.
Of course, there are many ways to clear the float, I feel free, after all, will always find the right one for you.
You may not be aware of CSS floating issues