CSS Float and related layout modes, CSS Float Layout mode

CSS Float and related layout modes, CSS Float Layout mode

Float Value

Attribute	Value	Description
	Left	Float left
	Right	Float to the right
	None	Default Value
	Inherit	Inheritance

Look at a chestnut

The red line frame represents the parent element.

 

The separation from the document stream is actually not completely separated and will be blocked by the boundaries of the parent element.

 

Float elements are in the same document stream

Let's look at a chestnut:

The red line box indicates the parent element.

After the three child elements "float left", the parent element has no content, so the parent element has no height.

 

 

Float element semi-detached Document Stream

The elements are separated from the document stream. The content is in the Document Stream. Elements overlap, but the content does not overlap.

 

Example:

<! DOCTYPE html> Float: Left;} </Style> 

 
 
 
Let's look at another example:
<! DOCTYPE html> 

We usually don't want this result, but the pink div is surrounded by the first text block. Use the clear attribute
 
 
Clear
To understand clear, you must first know that div is a block-level element, exclusive to a row in the page, top-down arrangement, that is, the legendary stream

  

 
   
 
    
 
     
Attribute name
 
     
Value
 
     
Description
 
    
 
    
 
     
Clear
 
     
Both
 
     
Including left and right
 
    
 
    
 
     
 
 
     
Left
 
     
Other floating elements are not allowed on the left.
 
    
 
    
 
     
 
 
     
Right
 
     
Other floating elements are not allowed on the right.
 
    
 
    
 
     
 
 
     
None
 
     
Default Value
 
    
 
    
 
     
 
 
     
Inherit
 
     
 
 
    
 
   

  
① Apply to subsequent elements to clear the impact of floating on subsequent elements.
② Applied to block-level elements
 
Usage:
Add a blank element (rarely used)
Clearfix, which is a general solution. It is actually unavailablePoint number,To clear the floating.
 
Example:
<! DOCTYPE html> 

 
 
 
I recommend a good article about float and clear: http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html.