Definition of float attribute : In which direction the element floats
The default value is : none
Note : A floating element will generate a block-level box, regardless of what kind of element it is.
HTML code:
<body> <div class="main"> <div class="d" id="d1">框1</div> <div class="d" id="d2">框2</div> <div class="d" id="d3">框3</div> <div class="d" id="d4">框4</div> </div></body>
1, when a sibling element When all floating elements are used, the height of the parent element without custom width and height will be zero
css style:
.main { border: 1px solid ; } .d { border: 1px solid red; width: 50px; height: 50px; float: left; }
Display effect:
2, floating elements will be in one line if there is not enough space. Extra floating elements will jump to the next line
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 will break away from the text flow and refer to the parent element
ccs style:
#d1{ float:left; }Display:
🎜>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
