CSS layout Float "2"

1. Page standard 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 Adjacent sibling elements situation

Whether the adjacent sibling element also contains the float property affects the layout.

1.5 Default layout diagram

<! 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
Div-b Add: Float:left
div-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
Div-b Add: Float:right
div-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 Float:left to these three div
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 Float:right to these three div
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 div-a to greater than Div-b and three div after adding 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 div floating elements are sorted, the "properties" of the inline element are changed, and when multiple floating element 1 rows are not fit, the line is wrapped.
4.3.3 Resolving browser width reduction variants
Embed the div element of the property that adds float in a div and add the width and Height properties to the div. When the browser width is reduced, no distortion will occur.
Refer to CSS HTML element layout and Display Properties
　　　　
　
============================================================================
CSS layout Float "2"