What is float? The role of floating in CSS

Article Introduction: Float deep analysis.

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. Impact on its parent element

   For its parent element, when 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 
      
    
       
   
        AAAAAAAA
       
   				
      
   			

3. Influence on the elements of their brothers (not floating)

   • If the sibling element is   block-level element

     Under modern browsers and ie8+, the element ignores floating elements 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, 7 each has a different performance, ie 6, 7, the sibling element will be immediately to the right 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; } 
          
      
           
     
            AAAAAAAA
           
      
           
     
            BBBBBBBBB
           
      
          
      

     IE 6:

     ie 7:

   • If the sibling element is an inline element

     The elements are arranged around floating elements.

          
     
     						
           
     
            AAAAAAAA
           
          text, text, text, text, writing, text, text, writing, text, text, text text text, text, type, text, text, text, text, type, type, text, Words, text, text, text, text, words, text, words
     					
          

          
     
     						
           
     
            AAAAAAAA
           
     						
     						
          
     					

4. 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.

          
     
     						
           
     
            AAAAAAAA
           
     						
           
     
            BBBBBBBBBB
           
     						
          
     					

   • Floating element in reverse direction:

     As mentioned in the analogy above, we can assume that there is a purchase point on the right and left sides of the ticketing center (figure, here we think of a div as a ticket buyer, the left-floating queue can be regarded as a left-order ticket purchase ticket queue, the opposite direction of the floating (that is, right floating) is the right to buy tickets to the ticket queue, So when the ticket center is wide enough, the two-queue crowd is unaffected. So they're on the same horizontal line.

           
     
     						
            
     
             AAAAAAAA
            
     						
            
     
             BBBBBBBBBB
            
     						
           
     					
      
     
     However, when the ticket center is too narrow or the ticket queue is too long, one of the queues will be arranged in a different line (this is the B queue, and one may ask why it is not a queue on a separate line.) 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.
      
            
     
     						
             
     
              AAAAAAAA
             
     						
             
     
              AAAAAAAA
             
     						
             
     
              BBBBBBBBBB
             
     						
             
     
              BBBBBBBBBB
             
     						
            
     					
      
     
     When the position of a ticket holder is not fit in the same row, two queues will stagger two rows
      
             
     
     						
              
     
               AAAAAAAA
              
     						
              
     
               AAAAAAAA
              
     						
              
     
               AAAAAAAA
              
     						
              
     
               BBBBBBBBBB
              
     						
              
     
               bbbbbbbbbb 
              
     						
             
     					
      
      

6. The effect of float on its own elements

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

7. Effects of float on child elements

   We know that when an element floats, it cannot open its parent element without a clear float, but it allows its own floating child element to open itself and, without defining a specific width, changes its width from 100% to 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 
       
   
   				
        
    
         
   
          AAAAAAAA
         
    
         
   
          aaaaaaaa 
         
    
        
   				
       
   			
    
    
        
   
   				
         
    
          
   
           AAAAAAAA
          
    
          
   
            aaaaaaaa
          
    
         
   				
        
   			
    
    
   . block {     width:250px;     height:50px;     border:1px solid #000;     Background: #CCC; }  
         
   
   				
          
    
           
   
            AAAAAAAA
           
    
           
   
             aaaaaaaa
           
    
           
    
          
   				
         
   			
    
    
   . Block
   				{width:
   							150px;
   					Height:
   							150px;
   					border:
   							1px solid #000;
   					Background:
   							#CCC;
   					}
   			
    
    
    

8. The effect of float on elements outside the parent element

   • Non-floating elements outside the parent element

     It can be seen from the above that 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 
          
     
     						
           
     
            AAAAAAAA
           
     						
          
     						
          
     
     					

   • Floating elements outside the parent element

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

           
     
     						
            
     
             AAAAAAAA
            
     						
           
     						
           
     
     					
      
      
     Two elements are floating in opposite directions:
      
     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; } 
            
     
     						
             
      
              
     
                aaaaaaaa
              
      
             
     						
             
     
     						
            
     					
      
      
             
     
     						
              
      
               
     
                 aaaaaaaa
               
      
               
     
                AAAAAAAA
               
      
               
     
                AAAAAAAA
               
      
               
     
                AAAAAAAA
               
      
              
     						
              
     
     						
             
     					
      
      

Summary

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