Home > Developer > JavaScript
Float attribute Definition: In which direction the element floats
The default value is: None
Note:: A floating element will generate a block-level box, regardless of its own elements.
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> </body>
1. When all the sibling elements are floating elements, the height of the parent element will be zero if there is no custom width.
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 row if there is not enough space in the row.
Css style:
.main { border: 1px solid ; width:130px; } .d { border: 1px solid red; width: 50px; height: 50px; float: left; }
Display Effect:
3. Floating elements are separated from text streams.
Ccs style:
#d1{ float:left; }
Display:
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
