CSS Float Float Property

This article mainly describes the Float property: Defines the direction in which the element floats.

Directory:

1. Page layout: Describes the document flow, floating layer, and float properties.

2. Float:left: Describes how the float is left when it is laid out.

3. Float:right: Describes how float is right when it is laid out.

4. Adjacent elements contain the Float property: Describes how the adjacent elements are laid out when they contain the float property.

1. Page Layout method

Page Layout method, mainly includes: document flow, floating layer, float property.

1.1 Document Flow

The standard document flow for HTML pages (the default layout) is: From top to bottom, from left to right, with blocks (block-level elements) wrapped.

1.2 Floating Layer

Floating layer: After assigning a value to the float property of an element, it is out of the document flow, floating around the left and right border of the parent element (the default is the body text area).

This floating element is populated by subsequent (non-floating) elements in the position where the document flow is vacated: block-level elements are populated directly, and floating elements overwrite block-level elements if they overlap with the range of floating elements. Inline elements: insert with voids.

1.3 Float Property Introduction

①left: Element floats to the left.

②right: Element floats to the right.

③none: Default value.

④inherit: Inherit the float property from the parent element.

1.4 Example

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">


2. Float:left

Description: The element floats to the left.

2.1 Code Changes

Input2 Add: Float:left

P-b Add: Float:left

p-d Add: Float:left

2.2 Post-Change view

① the width of the browser is "not long enough"

　　　　

When the width of the ② browser is "long enough"

　　　　

2.3 Conclusion


 
 
 
   
    
    
    
   
 
  
 
   
 
    
Current element Classification (FLOAT:LEFT)
 
    
Next adjacent element category (without float)
 
    
Conclusion
 
   
 
   
 
    
Block-level element (a)
 
    
Block-level element (b)
 
    
B will fill a left space, a will overlap with B, A's layer is above.
 
   
 
   
 
    
inline Element (b)
 
    
B is immediately behind a. And according to the characteristics of its inline elements, whether the line is wrapped.
 
   
 
   
 
    
inline Element (a)
 
    
Block-level element (b)
 
    
b does not follow the move of a.
 
   
 
   
 
    
inline Element (b)
 
    
B is immediately behind a. And according to the characteristics of its inline elements, whether the line is wrapped.
 
   
 
  
 

 

3. Float:right

Description: The element floats to the right.

3.1 Code Changes

Input2 elements: Adding float:right

P-b Add: Float:right

p-d Add: Float:right

3.2 Post-Change view

① the width of the browser is "not long enough"

　　

When the width of the ② browser is "long enough"

　　

3.3 Conclusion


 
 
 
   
    
    
    
   
 
  
 
   
 
    
Current element Classification (float:right)
 
    
Next immediate element classification (not including float)
 
    
Conclusion
 
   
 
   
 
    
Block-level element (a)
 
    
Block-level element (b)
 
    
B will fill the space left by a, if a will overlap with B (the parent container width is reduced), the layer of a is above.
 
   
 
   
 
    
inline Element (b)
 
    
B will fill the space left by a.
 
   
 
   
 
    
inline Element (a)
 
    
Block-level element (b)
 
    
b does not follow the move of a.
 
   
 
   
 
    
inline Element (b)
 
    
B will fill the space left by a.
 
   
 
  
 

 

4. Adjacent elements contain the float property

Because of the attributes of inline elements, it is best not to use the float property with inline elements adjacent to block-level elements.

The following are examples of block-level elements:

Default view:


4.1 Float:left

Add a float:left to all three P

4.1.1 View

① browser width "long enough"

　　　　

② Browser width "Not long enough"

　　　　

4.1.2 Conclusion

Ⅰ adjacent floating elements, the leftmost element of the Left property, is on the leftmost line.

When Ⅱ becomes a floating element, it has an "attribute" of the inline element in the floating layer, and wraps when multiple floating element 1 rows do not fit.


4.2 Float:right

Add a float:right to all three P

4.2.1 View

① browser width "long enough"

　　　　

② Browser width "Not long enough"

　　　　

4.2.2 Conclusion

Ⅰ the adjacent floating element, the first element of the right property, on the rightmost side.

When Ⅱ becomes a floating element, it has an "attribute" of the inline element in the floating layer, and wraps when multiple floating element 1 rows do not fit.


Block-level elements of 4.3 height range

Set the height value of the p-a to greater than P-b, and three p are added after Float:left:

4.3.1 view

① browser width "long enough"

　　　　

② Browser width is reduced

　　　　

③ Browser width is further reduced

　　　　

4.3.2 Conclusion

Ⅰheight the unequal P-floating elements are ordered, the "properties" of the inline element are changed, and when multiple floating element 1 rows do not fit, the line is wrapped.

4.3.3 Resolving browser width reduction variants

Embed the P element of the property that adds float in a p and add the width and Height properties to this p. When the browser width is reduced, no distortion will occur.

Refer to CSS HTML element layout and Display Properties