Floating float, positioning position understanding

Floating, positioning can achieve the layout of the page

Float Property Summary
Use scenario One: Implement side-by-side layout in a Web page
Characteristics:
When you implement left and right side
1. When the parent element is sufficiently wide enough, the layout
2, floating elements occupy the width of the space is the width of the content

Disadvantages:
Impact: Parent Element Height collapse
Cause: child element

Clear Floating method
1, can increase the height of the parent element
2, you can add an empty div, and then let him clear up and down floating around and clear:both;

Position Properties Summary
Use scene: Positioning to fix elements in a position

1, with absolute positioning, relative positioning, fixed positioning 3 properties

A, absolute positioning (to have a reference point), it is best to use the most recent parent class element as a reference, so that the parent element relative positioning
Characteristics:
A, will be out of the document flow, the original space occupied by the document flow will be released
B, the origin calculation is based on the most recent localization of the parent element, if there is positioning, according to body (0, 0) positioning

B, relative positioning
Use scenario One: When two elements overlap significantly
A, does not leave the document stream (does not release the original space)
B, the origin is calculated according to its position in the standard document flow

C, fixed positioning
A, out of the document flow (how wide the content is, how wide)
B, the origin calculation always follows the window.

Floating float, positioning position understanding