float

 

Interconversion between block-level elements and inline elements

• display
  
  • inline element in line
    
    • Cannot set width and height
    • Baseline its problem
    • gap problem
    • Arranged from left to right
  • inline-block
    
    • Cannot set width and height
    • Baseline its problem
    • gap problem
    • Arranged from left to right
• float
  
  • left float left
  • right float right
  • none remove float

floating features

• Out of the document flow (the parent element cannot find the child element, which is equivalent to the child element coming to the second level, parallel to the standard document flow)
• When the width and height are not set, the width and height are determined by the content
• All elements (whether block-level elements or inline elements) can set the float property
• Graphic mix
• do not inherit

float is heavier than display

Effects of clearing floats (Clearing floats)

• Set the height of the parent element
  
  • Whether the child element has content or not, the height of the parent element is certain
• set a parent elementoverflow:hidden;
  
  • After the child element is set to float, it is separated from the document flow. overflow:hidden;After setting a for the parent element, the child element will be pulled back into the document flow.
• Add after all elements that are set to floatclear:both;
  
  1. This element must be a block-level element
  2. Used after all floated elements
  3. This block-level element cannot have a floated attribute

<style>

ul li {

width : 100px ;

height : 100px ;

list-style : none;

float : left;

}

</style>

<ul>

<li> 111 </li>

<li> 222 </li>

<li> 333 </li>

<div style="clear: both"> </div>

</ul>

• Use pseudo-elements to clear the impact of floating - a common method of clearing floating

<style>

<!--Compatible with high version browsers-->

.clear:after{

display: inline-block;

content: "";

clear: both;

}

<!--Compatible with lower version browsers (ie versions below IE9)-->

.clear{

*zoom:1;

}

</style>

In the project, to set the float to the child element, the parent element (the parent element closest to the child element) must be set to clear the effect of the float