Home > Developer > Web Develop
the definition of the Float property : in which direction the element floats
The default value is : None
Note : A floating element generates a block-level box, regardless of its own element
HTML code:
<body> <div class= "main" > <div class= "D" id= "D1" > Box 1</div> <div class= "D" id= "D2" > Box 2 </div> <div class= "D" id= "D3" > Box 3</div> <div class= "D" id= "D4" > Box 4</div> </ Div></body>
1, when the sibling element is all floating, its parent element will be zero in height without a custom width height
CSS style:
. main { border:1px solid; }
. d { border:1px solid red; width:50px; height:50px; Float:left; }Display effect:
2, the floating element will jump to the next line in a row where the space is not enough for the extra floating element
CSS style:
. main { border:1px solid; width:130px; } . d { border:1px solid red; width:50px; height:50px; Float:left; }Display effect:
3, the floating element is detached from the text stream, referencing the parent class element
CCS Style:
#d1 { float:left; }Show:
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
