The float of CSS

What is float?

Float is floating, and the role in CSS is to leave the element out of the normal document stream and move it to the leftmost or rightmost side of its parent element. The following explains the concepts of several nouns in this definition:

• Document flow: In the HTML Chinese file flow is the order in which elements are arranged from top to bottom.
• Detach from the document stream: The elements are drawn away from the normal order of arrangement.
• Leftmost/rightmost: the above moving to the left and right of the parent element means that the element moves left or right until it touches the boundary of another floating element or parent element content area (excluding padding).

 

The effect of float

2. effect on its parent element

   For its parent element, after the element floats, it is detached from the current normal document stream, so it cannot open its parent element, causing the parent element to collapse, as shown in the following illustration.

    #wrapper {padding:20px;
       border:1px solid red;
   width:350px;
       }. floatl {width:100px;
       height:100px;
       border:1px solid #000;
   Float:left;
       }. floatr {width:100px;
       height:100px;
       border:1px solid #000;
   Float:right; Blue {background: #6AA;}. Red {background: #A66;}//html <div id= "wrapper" > <div class= "Floatl Blue" >aa aaaaaa</div> </div> 

   
   

4. the effect on its sibling element (not floating)
   • If the sibling element is a   block-level element

     Under modern browsers and ie8+, the element ignores the floating element and occupies its place. And the elements are below the floating element (and cannot change their cascade position through the Z-index property), but its inner text and other inline elements surround the floating element.

     Note that under IE 6 and 7 each has a different performance, ie 6, 7, the sibling element will be immediately to the right side of the floating element, and in the IE6 between the two left a 3px gap. This is the famous "IE 3px bug"

     //css, and the other styles are given above and are not repeated here. Block {width:200px;
         height:150px;
         border:1px solid #000;
     Background: #CCC; } <div id= "wrapper" > <div class= "Floatl Blue" >AAAAAAAA</div> <div class= "Block" >bbbbbbbbb& lt;/div> </div> 

     
     

     IE 6:

     
     

     IE 7:

     
     

   • If the sibling element is a   inline element

     Then the elements are arranged around the floating element.

      <div id= "wrapper" > <div class= "Floatl Blue" >AAAAAAAA</div> text, text, type, text, text, text
     text, text, text, text, text, text, text, text, text, text, text, text, text and text text, text, text, type, type, text, text, type, text, Word, type, and </div>, the text, the writing, the literal and the text, the text, the text, the text, the text, the text, the
      <div id= "wrapper" > <div class= "Floatl Blue" >AAAAAAAA</div>  </div> 
     

5. 
   

   Influence on the elements of their brothers (floating)

   
   

   • Floating elements in the same direction:

     When a floating element encounters a floating element in the same direction during a float, it follows them, and it can be described in such a figurative way: in a shopping center, someone queues from a ticket queue to a nearby ticket queue, and the person who runs past will occupy the front position first. But the ticket queue is still in the current ticket center, so this floating queue and the normal document stream queue are still in the same parent element.

     <div id= "wrapper" >
         <div class= "Floatl Red" >AAAAAAAA</div>
         <div class= "Floatl Blue" > Bbbbbbbbbb</div>
     </div>

     
     

   • floating element in reverse direction:

     As mentioned in the analogy above, we can assume that there is a point of purchase at the right and left sides of the ticketing center (pictured, where we see a div as a ticket-buyer), and a floating queue can be regarded as a ticket-buying queue for a left-order ticket. Floating in the opposite direction (that is, right floating) is the ticket to the right to buy the ticket queue, so the ticket center is wide enough when two queues of people are not affected. So they're on the same horizontal line

      <div id= "wrapper" > <div class= "Floatl Red" >AAAAAAAA</div> <div class= " Floatr Blue ">BBBBBBBBBB</div> </div> 

     but when the ticket center is too narrow or the ticket queue on both sides is too long, One of the queues is arranged in a different line (this is the B queue, and one might ask why not a queue is another row?) From the HTML structure below, this is because in the time, the a queue is earlier than the B queue, based on the first-come-first-served principle, the B-queue of the ticket buyers in the position is not enough when the natural to start another line.

      <div id= "wrapper" > <div class= "Floatl Red" >AAAAAAAA</div> <div class= "Floatl Red" & Gt aaaaaaaa</div> <div class= "Floatr Blue" >BBBBBBBBBB</div> <div class= "Floatr Blue" >bbbbbbbb bb</div> </div> 

     
     when the position of a ticket holder is not fit in the same row, two queues stagger two rows

      <div id=" wrapper "> <div class=" Floatl Red ">aa aaaaaa</div> <div class= "Floatl Red" >AAAAAAAA</div> <div class= "Floatl Red" >aaaaaaaa</d 
     iv> <div class= "Floatr Blue" >BBBBBBBBBB</div> <div class= "Floatr Blue" >BBBBBBBBBB</div> </div> 

     
     

6. The
7. effect of float on its own elements

   The float object is treated as a block object (Block-level), that is, the display property is equal to blocks.

9. float effect on child elements

   We know that when an element floats, it cannot open its parent element without a clear float, but it can keep its own floating child element open and, without defining a specific width, make its width from 100% becomes adaptive (floating element Display:block). The height and width are the maximum values between the height of the floating element and the height of the non floating element.

   //Here we remove the fixed width of the #wrapper and add a fixed-width div outside it to better display the <div class= "container" > <div id= "wrapper" > <div class= "Floatl Red" >AAAAAAAA</div> <div class= "Floatl Red" >AAAAAAAA</div> < /div> </div> 

   
   

    <div class=" container "> <div id=" Wrapper "style=" Float:left; " 
       > <div class= "Floatl Red" >AAAAAAAA</div> <div class= "Floatl Red" >AAAAAAAA</div> </div> </div> 

   
   

   . block {width:250px;
   height:50px;    border:1px solid #000;
   Background: #CCC; } <div class= "container" > <div id= "wrapper" style= "Float:left"; 
           > <div class= "Floatl Red" >AAAAAAAA</div> <div class= "Floatl Red" >AAAAAAAA</div> <div class= "Block" ></div> </div> </div> 

   
   

   . Block { width:150px; height:150px; border:1px solid #000; Background: #CCC; } 

   
   

    

11. float effects on elements outside of the parent element
    • non-floating elements outside the parent element

      From the above, when an element floats, without a clear float, it cannot open its parent element, that is, the width of the parent element is 0. and a non floating element outside of its parent element ignores the floating element, and the floating element seems to be in another world.

      //css. outer {height:150px;
          width:350px;
      BORDER:1PX solid blue; }//html <div id= "wrapper" > <div class= "Floatl Red" >AAAAAAAA</div> </div> <div class= "outer "></div> 

      
      

    • floating element outside of parent element

      When elements outside the parent element of a floating element are floating elements, they seem to be in the same world.
      Two elements have the same floating direction:

    • 
      

      //css, Here we add a fixed-width div outside of them to display, otherwise the right floating element floats to the right edge of the body. ContaineR {width:650px;
          height:250px;
      border:1px solid #000;
          } 
      <div class= "container" > <div id= "wrapper" > 
      <div class= "Floatl Red" >AAAAAAAA</div> </div> 
      <div class= "outer" style= "float:right;" ></div> </div> 
      

    • 
      

       <div class=" container "> <div ID = "wrapper" > <div class= "Floatl Red" >AAAAAAAA</div>
       <div class= "Floatl Red" >aaaaaaaa&l t;/div> <div class= "Floatl Red" >AAAAAAAA</div> 
      <div class= "Floatl Red" >aaaaaaaa</d iv> </div>
       <div class= "outer" style= "float:right;" ></div> </div> 

      
      

Summarize

There's actually a lot more to the impact of float on the page, but they're in a variety of specific scenarios that can't be enumerated, and this article doesn't want to be exhaustive, but hopefully the students will be able to understand what float is and the damage it does to the document. Only a deep understanding of its meaning can be used in a variety of different scenarios to use float this magical thing.