How to clear float

Why is floating cleared?

When an element uses the float style but does not clear the floating, the parent element container with the floating element cannot be automatically opened. That is to say, when an element is floating, if it is not closed, its parent element will not contain this floating element because the floating element is detached from the document stream, this affects the positions of front and back labels, parent labels, and width HEIGHT attributes.

 

You can clear the floating state by setting the parent element Attribute Overflow: hidden.

<! -- Zoom: 1 is used to trigger layout --> <Div style = "Background: # 00f; overflow: hidden; ZOOM: 1;"> <Div style = "float: left; width: 20px; Height: 20px; Background: # d00; "> </div> <Div style =" float: Left; width: 20px; Height: 20px; Background: # d00; "> </div>

 

By setting the pseudo class: After and zoom of the parent element, the floating is cleared.

/* Clear floating Code */. clearfloat: After {display: block; clear: Both; content: ""; visibility: hidden; Height: 0 }. clearfloat {ZOOM: 1} <Div class = "clearfloat"> <Div style = "float: Left; width: 20px; Height: 20px; Background: # 00D; "> left </div> <Div style =" float: Left; width: 20px; Height: 20px; Background: # 00D; "> left </div>