Floating (float)

The most typical application of float: It is possible to arrange block level elements in a row to display the layout of a web page. First rule: Multiple block level elements are arranged vertically to find the standard flow, and arranged horizontally to find the float.

  1. To move away from the control (float) of a standard ordinary flow to a specified position (move).
  2. Floating boxes no longer retain their original positions

The second rule for web page layout: first set the box size, then set the box position floating box will only affect the standard flow behind the floating box, not the standard flow of money

Set up floating
    <div class="big">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
    // Add a float to a box inside a large box, and add a float to the other box. Otherwise, the second box will occupy the original position of the first box, because the float will be out of the standard flow, and the original position will not be retained.
    .box1 {
      float:left;
      // Float has two properties: left and right. A floating box can be moved left or right until its outer edge hits the border that contains the box or another floating box.
    }
    .box2 {
      float:left;
      }
Copy the code
Remove the floating
The selector {clear: Attribute value; } .box {clear:left}// Clear the left float
    Left, right, and both--both clears both sides of the float
Copy the code

Method to clear the float

  1. Additional labels (partition method) add an empty label after the last floating label, and then refer to clear: both
  2. Overflow: property value; Hidden, auto, or Scroll adds overflow to the parent element, usually hidden
  3. : after{comtent:”; clearfix: after{comtent:”; display:block; height:0; cear:both; visibility:hidden; }

Clearfix: vefore,.clearfix:after{content:” “; display:tavle; } .clearfix:after{clear:both; }

The CSS positioning

Positioning: the box is fixed in a certain position, so positioning is also to place the box, and move the box according to the positioning method. Positioning = Positioning mode + edge deviation

  1. Position Mode Position of the CSS

Sratic static positioning, relative positioning, Absolute positioning, fixed positioning 2. 1. Static positioning: Static is the default positioning of an element

When an element moves relative to its original position, it continues to occupy its original position in the standard flow.

Three, absolute positioning: Absolute features: 1. If there is no ancestor element and ancestor element is not located, the browser shall prevail positioning (document document) 2. If the ancestor element has a position (relative, absolute, or fixed), then the nearest ancestor element with a position is taken as the point of reference 3. The absolute position no longer occupies the original position, and is usually used to locate the box by the child and the father

Features: 1. Take the browser’s visual window as the reference point to move as the element 2. Fixed position no longer occupies the original position fixed position tip: set the fixed position box to the right of the center (left 50%, add a margin-left half of the width of the center of the box)

Stickly positioning: Stickly can follow the page as it moves, but setting the attribute value plus pixels will fix the box with stickly positioning to that pixel value on the page

Select {z-index:1} The larger the number, the higher the hierarchy. Add absolute or fixed positioning, float, and default size is the content size if no width or height is given