div css clear floating_html/css_WEB-ITnose

When an element has a floating attribute, it will affect its parent element or subsequent elements.
There will be a layout disorder. The effect of floating can be solved by clearing the float.

Float clear (clear):

Value:
none: Default value. Floating objects are allowed on both sides;
left: Floating objects are not allowed on the left side;
right: Floating objects are not allowed on the right side;
both: Floating objects are not allowed on the left and right sides.

Methods to clear floats:
1. Additional tag method
This method should be the simplest one. W3C recommends adding a "clear:both" element at the end of the container
Force the container to adapt to its height to accommodate all float elements.

. clear{clear:both;}

2. Add overflow:hidden;
to the parent element. Note: If the child element uses positioning layout, it will be difficult to implement.

3. Use the pseudo-object after method
to define a class and use the pseudo-object after to control the influence of floating elements.
The most popular clear floating code on the Internet:
.clearFix:after{
clear:both;
display:block;
visibility:hidden;
height:0;
line-height:0;
content:'';

}
.clearFix{zoom:1;} /*Solve ie6/7 compatibility issues*/

The use of css overflow
Set how to manage the content when the content of the object exceeds its specified height and width.
overflow:visible [Default value, do not cut the content or add scroll bars]
auto [The object content will be cut or add scroll bars when necessary]
hidden [Do not display overflow objects Size content]
scroll [Always display scroll bars]

zoom attribute: only supported by browsers with IE core, zoom ratio.
Sets or retrieves the zoom ratio of an object.
Syntax: normal [default value, use the actual size of the object]; number [percentage | unsigned floating point real number. When the floating point real number
is 1.0 or the percentage is 100%, it is equivalent to the normal value of this attribute
zoom: 1 solves the problem of ie6 height adaptation.