Home > Developer > Web Develop
Float property: Defines the direction in which the element floats.
1. Page standard document flow, floating layer, float property 1.1 document FlowThe 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 LayerFloating 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 situationWhether 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 "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head> <title>2.3-float Property</title> <styletype= "Text/css">#a{Background-color:Red;Height:50px;width:100px; }#b{Background-color:Yellow;Height:50px;width:200px; }#c{Background-color:Blue;Height:50px;width:300px; }#d{Background-color:Gray;Height:50px;width:400px; } </style></Head><Body><DivID=a>Div-a</Div><DivID=b>Div-b</Div><DivID=c>Div-c</Div><inputtype= "text"value= "INPUT1" /><inputtype= "text"value= "Input2" /><inputtype= "text"value= "Input3" /><DivID=d>Div-d</Div><inputtype= "text"value= "Input4" /></Body></HTML>2.float:left
Description: The element floats to the left.
2.1 Code ChangesInput2 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. |
Description: The element floats to the right.
3.1 Code ChangesInput2 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. |
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:leftAdd 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:rightAdd 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 rangeSet 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 variantsEmbed 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 Float Float Property Introduction
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
