Detailed summary of float

float Detailed summary of floating

1. Positioning scheme

stay css in , Yes 4 There are two common methods to locate and layout elements ：

• normal flow： Standard flow 、 The document flow ;
• position： location （relative、absolute、fixed）;
• float： float ;
• flex： Elastic layout ;

Floating 、 Positioning of the absolute and fixed Can make Element out of standard flow , To achieve the effect of flexible layout .

2.float The attribute value

float Common values of attributes are as follows 3 individual ：

• none： Don't float （float The default value of ）;
• left： Float left ;
• right： Floating to the right ;

3. Floating rules

3.1. Rule one

• After the element is floating , Will break away from the standard flow ;

• Move to the left or right , Until your boundary is close to the containing block （ It's usually the parent element ） Or the boundary of other floating elements ;

  • Sample code ：

    .box {
            
      width: 600px;
      height: 200px;
      background-color: #87ceeb;
    }
    
    .inner {
            
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: #0f0;
    }
    
    span {
             background-color: #f00; }
    
    strong {
             background-color: #f0f; }
    
    a {
             background-color: #fff; }
    

    <div class="box">
      div The text of the element 
      <div class="inner"></div>
      <span>span Elements </span>
      <strong>strong Elements </strong>
      <a href="#">a Elements </a>
    </div>
    

  • Running results ： No floating is added to any element , Layout for standard flow ;

    

  • to strong Element to add float: left;,strong The element moves to the parent element box Top left corner of ;

    

  • to strong Element to add float: right;,strong The element moves to the parent element box Top right corner of ;

    

  • If strong Element has been added by default , And then to a Element and add floating ,a The element will move to close strong Position of elements ;

    

• The positioning element will be stacked on the floating element ： Standard elements > Floating elements （ Not none） > Positioning elements （ Not static）;

3.2. Rule 2

• Floating elements cannot overlap with inline content , Inline content will be pushed out by floating elements , As can be seen from the example of rule 1 above ;

• It's because of the design float It is used for text wrapping , It will not cover the contents of the line level ;

  

• The inline content contains inline elements 、inline-block Elements 、 Text content of block level elements, etc ;

3.3. Rule three

• In line elements 、inline-block After the element floats , Its top will align with the top of the row ;
• It can be found from rule 2 that , After the picture is set to float left , It doesn't move to the upper left corner of the parent element , Instead, it moves to the far left of the line where the picture is located ;

3.4. Rule 4

• Element left （ Right ） float , The left side of the floating element （ Right ） The boundary cannot exceed the left of the containing block （ Right ） The border ;

  • Sample code ：

    .box {
            
      width: 400px;
      height: 200px;
      background-color: skyblue;
      color: #fff;
    }
    
    .inner1 {
            
      float: left;
      width: 100px;
      height: 100px;
      background-color: red;
    }
    
    .inner2 {
            
      float: right;
      width: 100px;
      height: 100px;
      background-color: green;
    }
    

    <div class="box">
      <div class="inner1"> Left floating </div>
      <div class="inner2"> Right float </div>
    </div>
    

  • Running results ：

    

3.5. Rule five

• Floating elements cannot be stacked ;
• If an element floats , Another element is already in that position , The last floating element will be close to the previous floating element （ Left float find left float , Right float, right float ）;
• If there is not enough space left in the horizontal direction, display floating elements , The floating element will move down , Until there is enough space ;

Sample code ： to box All element settings in float: left;.

.box {
    
  width: 400px;
  height: 500px;
  background-color: skyblue;
  color: #fff;
}

.inner1 {
    
  float: left;
  width: 100px;
  height: 100px;
  background-color: red;
}

.inner2 {
    
  float: left;
  width: 200px;
  height: 200px;
  background-color: green;
}

.inner3 {
    
  float: left;
  width: 200px;
  height: 200px;
  background-color: purple;
}

.inner4 {
    
  float: left;
  width: 50px;
  height: 250px;
  background-color: blue;
}

<div class="box">
  <div class="inner1">inner1</div>
  <div class="inner2">inner2</div>
  <div class="inner3">inner3</div>
  <div class="inner4">inner4</div>
</div>

Running results ：

3.6. Rule 6

• The top of a floating element cannot exceed the top of the containing block , Nor can it exceed the top of all previous floating elements ;
• From rule five, we can find that ,inner4 After setting the float , No more than inner3 At the top of , Even if there's extra space on it ;

4. Floating problems and clear Property introduction

• Due to the standard flow of floating elements , It becomes a de standard element , therefore No longer report height to parent element 了 ;
• When calculating the total height of the parent element , The height of the floating child element will not be calculated , Lead to The parent element collapses high problem ;
• The process of solving the problem of high collapse of parent elements , It's called clear float , The following will provide several schemes to clear the float ;

5.clear attribute

Before talking about the clear float scheme , You need to know something first clear attribute .

• clear Common values of properties ：

  Property value	effect
  left	The top of the element is required to be lower than the bottom of all previously generated left floating elements
  right	The top of the element is required to be lower than the bottom of all previously generated right floating elements
  both	The top of the element is required to be lower than the bottom of all previously generated floating elements
  none	The default value is , No special requirements

• commonly clear Only in Non floating element On , You can make non floating elements and floating elements not stack .

5. Common ways to clear floats

• Scheme 1 ：

  • Set a fixed height directly to the parent element ;
  • shortcoming ： Poor scalability ;

• Option two ：

  • Add an empty block level child element at the end of the parent element , And set up clear: both;;
  • shortcoming ： Will add a lot of meaningless empty tags , Late maintenance trouble , And it violates the principle of separating structure from style ;

• Option three ：

  • Add a... At the end of the parent element br label ：<br clear="all">;
  • shortcoming ： Same as scheme 2 ;

• Option four ：

  • Add... To the parent element ::after Pseudo elements ;
  • advantage ： pure css Style solution , Separation of structure and style , And no extra labels are added ;
  • Generally, pseudo elements are used to clear floating , Will write a separate class , Easy to reuse , When using, you can directly add the type to the parent element ;

  .clear-fix::after {
        
    content: ""; /*  Core attributes , Be short of one cannot  */
    display: block; /*  Core attributes , Be short of one cannot  */
    clear: both; /*  Core attributes , Be short of one cannot  */
    height: 0; /*  Compatible with old browsers  */
    visibility: hidden; /*  Compatible with old browsers  */
  }
  .clear-fix {
        
    zoom: 1; /*  compatible IE6~7 */
  }