Float attribute: defines the direction in which the element floats.
1. standard document flow, floating layer, float attribute 1.1 document flow
The standard Document Stream (default layout) of the HTML page is: top-down, left-to-right, block-level elements) line feed.
1.2 floating layerFloating layer: After assigning a value to the float attribute of an element, it is to float left and right away from the document stream, closely following the Left and Right Border of the parent element (the default is the body text area.
1.3 float attributes① Left: the element floats to the left.
② Right: the element floats to the right.
③ None: default value.
④ Inherit: inherits the float attribute from the parent element.
1.4 adjacent sibling ElementsWhether the adjacent sibling element also contains the float attribute affects the layout.
1.5 default Layout
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <title> 2.3-float attribute </title> <style type =" 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>
2. float: left
Note: The elements float left.
2.1 code change
Input2 Add: float: left
Add div-B: float: left
Add div-d: float: left
2.2 view after change
① When the browser width is "not long enough"
② When the browser width is long enough
2.3 conclusion
| Current element category (float: left) | Next adjacent element category (excluding float) | Conclusion |
| Block-level elements () | Block-level elements (B) | B will fill in the space left by a, a will overlap with B, and a's layer will be above. |
| Inline element (B) | B will be followed by. Whether to wrap the line based on the characteristics of the inline element. | |
| Inline element () | Block-level elements (B) | B will not follow the movement of. |
| Inline element (B) | B will be followed by. Whether to wrap the line based on the characteristics of the inline element. |
3. float: right
Note: The elements float to the right.
3.1 code changeInput2 element: Add float: right
Add div-B: float: right
Add div-d: float: right
3.2 view after change① When the browser width is "not long enough"
② When the browser width is long enough
3.3 conclusion
| Current element category (float: right) | Next adjacent element category (excluding float) | Conclusion |
| Block-level elements () | Block-level elements (B) | B fills the space left by a. If a overlaps with B (the width of the parent container is reduced), the layer of a is on it. |
| Inline element (B) | B will fill in the space left by. | |
| Inline element () | Block-level elements (B) | B will not follow the movement of. |
| Inline element (B) | B will fill in the space left by. |
4. Adjacent Elements contain the float attribute
Because of the characteristics of inline elements, it is best not to use the float attribute adjacent to the block-level elements.
The following uses block-level elements as an example.:
Default view:
4.1 float: leftAdd float: left to all three Divs.
4.1.1 View① The browser width is "long enough"
② The browser width is "not long enough"
4.1.2 conclusion
I. Adjacent floating element. The element at the top of the left attribute is at the leftmost.
Ii. After being a floating element, the floating layer has the "feature" of the inline element. When multiple floating elements cannot fit in 1 row, a new line is wrapped.
4.2 float: right
Add float: right to all three Divs.
4.2.1 View① The browser width is "long enough"
② The browser width is "not long enough"
4.2.2 conclusion
I. Adjacent floating elements. The elements at the top of the right attribute are arranged on the rightmost side.
Ii. After being a floating element, the floating layer has the "feature" of the inline element. When multiple floating elements cannot fit in 1 row, a new line is wrapped.
Block-level elements with different heights of 4.3
Set the height value of div-a to greater than div-B. After adding float: left to all three divs:
4.3.1 View① The browser width is "long enough"
② When the browser width is reduced
③ When the browser width is further reduced
4.3.2 conclusion
When div floating elements whose I height is not equal are sorted, they have the "characteristics" of inline elements. When one row of multiple floating elements cannot accommodate them, a new line is wrapped.
4.3.3 address browser WIDTH REDUCTION AND DEFORMATIONEmbed the div element of the property added to float into a div and add the width and height attributes to the div. When the browser width is reduced, no deformation will occur.
For details, refer to css html element layout and Display attributes.
Series of articles =================================================== ====
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
