Div+css's clear float

When an element has a floating property, it has an effect on its parent element or subsequent elements.
There will be a pattern of confusion, which can be solved by clearing floating methods to solve the effects of floating.

Floating Cleanup (Clear):

Value:
None: Default value. Allowed to have floating objects on both sides;
Left: No floating object is allowed
Right: Do not allow floating objects on the left;
Both: Floating objects are not allowed on the left and right sides.

To clear floating methods:
1. Additional Labeling method
This method should be the simplest one, and the proposal to add a "clear:both" element at the end of the container
Force the container to fit its height so that all the float elements are loaded.
<div id= "Main" >
<div id= "left" ></div>
<div id= "right" ></div>
<div class= "Clear" ></div>
</div>
<div id= "Footer" ></div>

. Clear{clear:both;}

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

3. Using pseudo-objects after methods
Defines a class that uses pseudo-objects after, to control the impact of floating elements.
The most popular clear floating code on the Web:
. clearfix:after{
Clear:both;
Display:block;
Visibility:hidden;
height:0;
line-height:0;
Content: ";

}
. clearfix{zoom:1;}/* Resolve IE6/7 compatibility issues */

Use of CSS Overflow
How to manage content when you set the object's content beyond its specified height and width.
Overflow:visible "Default value, do not cut content or add scroll bars"
Auto "The object content will be clipped or added when required."
Hidden "Do not display content beyond the object size"
Scroll "Always show scroll bars"

Zoom property: Only browser support for IE kernel, zoom scale.
Sets or retrieves the scale of the object.
Syntax: normal "default value, using the actual size of the object"; number "percent | unsigned floating-point real number. Floating point Real numbers
is 1.0 or a percentage of 100% equals the normal value of this property
Zoom:1 solves the problem of IE6 height adaptation.