Home >Web Front-end >HTML Tutorial >css float attribute analysis_html/css_WEB-ITnose
css float attribute analysis_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:03:47900browse
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:
🎜>