The front end (F) - CSS floating and positioning of

1. Float float

• Definition: the element is an attribute, attribute set elements will float off the flow of control standards document , move to the parent element specified position in the process, allowing any cassette in one row are arranged to float with the layout.
• Standard document flow : document flow refers to the element layout process layout elements are automatically left to right, from top to bottom flow arrangement . And finally divided form from top to bottom line, and the discharge of the elements from left to right in each row. Resulting blank is folded, uneven height, alignment and bottom wrap and so on.
• Format: Selector {float: Property Value;}
  Property Value: left-- left floating elements; Right - right floating elements; none-- elements do not float (default)
• Characteristics: ① from the standard flow, does not account for the location, only about floating ; ② a floating creates a conceptual block level comprises, adding a parent box on the outside, and then aligned; ③ if one floating elements are aligned therewith at the top, if a standard flow element is arranged vertically.
• Block-level elements : a separate line as h1 ~ h6 p div ... list
  inline elements : as a separate line is not span a img strong ...
  inline elements may be included in the block-level element, not conversely
• the display : block elements shown as Block / inline row of the display element / inline-block elements shown as blocks, but may be inline, is not displayed in a row / none element
• Examples of presentation
  
  

2. The collapse of the parent border issues

• clear: Clear float
  clear: right; right floating elements allowed
  clear: left; left floating elements allowed
  clear: both; both floating elements allowed
  clear: none; no floating element

Solution:
(1) increasing the height of the parent element

(2) to increase an empty div tag, clear float

(3) an increase in the parent element overflow: hidden;

(. 4) parent add a pseudo-class: after

• Summary
  (1) Set the parent element height: simple, with a fixed height assume element, will be restricted;
  increased back empty div (2) floating elements: simple, to avoid the code space;
  (. 3) overflow: Simple, avoid the use of pull-down some scenarios;
  (4) the parent class to add a pseudo-class: After ( recommended ): writing a little more complicated, but no side effects.

3. The relative positioning

• Common position property values: static-- automatic positioning (default); relative-- relative positioning; absolute-- absolute positioning; fixed-- fixed positioning
• position: relative;
• Offset Properties: Top - Top offset; bottom - bottom offsets; left - offset left; right - right offset
• With respect to the original position, specifying an offset , then the relative positioning, it is however in any standard document stream, the original position is retained .
• The example code
  
• operation result
  

4. Absolute positioning

• position: absolute
• Location: Based xxx positioning, vertically and horizontally (Top, bottom, left, right)
  (. 1) no parent element positioned under the premise, the browser with respect ;
  (2) assuming the parent element exists positioned , we usually respect parent element offset ;
  (3) moves within the scope of the parent element .
  Relative to the parent or browser specified offset, absolute positioning, then it is not in the standard flow of the document, the original position will not be retained .
• The example code
  
• operation result
  

The fixed positioning

• position: fixed
• The position of the element with respect to the browser window is a fixed position
  

6. z-index

• Positioning of elements of the document regardless of the flow , so that they can cover other elements on the page
  z-index attribute specifies the stacking order of an element (which element should be placed in front, or behind)
  z-index -------- -------- stacking order of elements disposed values: Number / Auto
  Z-index: default is 0, the highest unlimited

• opacity transparency attribute values from 0.0 - 1.0 . The smaller the value , so that the element more transparent . It is for the whole element , once set transparency, the background color, text color has transparency.

• The example code
  

• operation result