About HTML page layout (float and position)

Float float on usage

Opened the floating element will have the following effects

1. Elements will flow out of the original document , no longer occupy the position of the original page , the back of the elements fill the seats , the page can be seen as a floor, we were originally on the first floor, plus the equivalent of floating on the second floor, shaped as follows FIG:
   not added floating
   
   on the left floating plus div1
   
   can see the yellow div1 div2 up the positions of, and the text "sub-element div2" pushed down, div2 to fill div1 for bit operation.
2. Floating elements will remain in the left and right sides of the parent element , such as the example above, plus a left floating div2 still leaning against the left corner of the parent element (gray box), if it is floating right is leaning against the right side of the parent element; float other elements will stay in the edge of the floating elements , for example, FIG, plus give div1 left floating, the form:
   
   such that the two are left floating div, Div2 will stay in the next div1.
3. Float placed in a row to meet the requirements of the plurality of block-level elements, such as a div to be placed within a plurality of elements, such as tables and other div elements, shaped as shown below:
   
   For this case, the left side of the "My Jingdong "form on the right and left while doing floating operation.

Following examples: we only need to add the right div3 floating operation, and then to adjust the position of the specific margin; div2 look at the three small plates (corresponding to a section of a book and corresponding text), can be added simultaneously to the three sections left floating. Floating generally be used to locate a large plate, or a plurality of plates arranged laterally within the div.

For the use of positioning position

First of all to talk about the position of the four attributes:
static (default)
relative (relative positioning)
Absolute (absolute positioning)
Fixed (fixed positioning)

static: position is set to static and does not flow out of the original document, but can be canceled locate the original settings, can be understood as having five div, plus all relative positioning, but does not need a div relative positioning, can the div separately provided static.

relative: element added relative positioning does not flow out of the original document , the original is what kind or what kind, used in conjunction with the absolute positioning, because the addition of the parent element is absolutely positioned elements will have been positioned relative to the positioning, if the parent element are not positioning, positioning of the body relative to the sub-element, so that together with the relative positioning of the parent element, the sub-elements plus absolute positioning, examples will be mentioned below.

absolute: absolutely positioned elements will flow out of the original document, the relative nearest positioned parent element to adjust the position , like this:
This Best1 picture is achieved by positioning absolute

no Best1 when coupled with absolute positioning:

to Best1 coupled with absolute positioning from the top, left information:

#book #node1 {
				position: absolute;
				top: 100px;
				left: 20px;
			}

Used alone to fine-tune the relative positioning of elements, together with the relative positioning and absolute positioning can be positioned within a small element of the parent element of small plates, it is easy to use.

fixed: fixed positioning may be a visual element has been fixed position on the page, with user location does not change the operation of the decline , like page ads, of course, out of the original document flow, shaped like:

Fixed Code:

#buttom{
				position: fixed;
				margin: 200px 100px;
			}