下面简单介绍float的用法，表示含义在注释行
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 ????<meta charset="UTF-8"> 5 ????<title></title> 6 </head> 7 <body> 8 ????<div style="background-color: red;width: 20%;float: left">123</div> <!--正常div是块及标签，float以后后面的标 9 ????签就能和此div放在同一行，float的value里面left是指此标签挨着上一个float的标签末尾靠左放-->10 ????<div style="background-color: black;width: 50%;float: left;border: 3px solid yellow">12311 ????????<div style="color: red;width: 20%;float: left;height: 30px;border: 3px solid green">我就是float左边</div>12 ????????<!--div嵌套里面的宽度是相对于父标签的宽度为基准-->13 ????????<div style="color: red;width: 20%;float: right;height: 300px;border: 3px solid green">我就是float右边</div>14 ????????<!--父标签没有高度时候子标签会将父标签撑高，父标签的高度取子标签最高的一个-->15 16 ????</div>17 ????<div style="background-color: blue;width: 200px;border: 3px solid green;color: yellow">12318 ????????<div style="color: red;width: 20%;float: left;height: 30px;border: 3px solid green">我就是float左边</div>19 ????????<div style="color: red;width: 20%;float: right;height: 30px;border: 3px solid green">我就是float右边</div>20 ????????<div style="clear: both"></div> ?<!--子标签float以后让父标签的表框处于子标签边框上一层-->21 ????</div>22 23 ????<div style="background-color: green;width: 50%;float: left">123</div>24 </body>25 </html>
css之float
原文地址：https://www.cnblogs.com/flags-blog/p/10392336.html