float
在css中float是浮动的意思，可以让元素浮动到自己想要的地方。
属性值有：left，right，none，inherit（在IE8以下的任意版本不支持）
与float相关的属性clear：属性值：left（清楚左边），right（清楚右边），both（清楚左右两边），none（无），inherit（继承的浮动元素）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .d{ 8 width: 400px; 9 height: 20px; 10 border: 1px solid red; 11 } 12 .s1{ 13 background-color: green; 14 } 15 .s2{ 16 background-color: greenyellow; 17 } 18 .s3{ 19 background-color: aquamarine; 20 float: right; 21 } 22 </style> 23 </head> 24 <body> 27 <div class="d"> 28 <span class="s1" >test1</span> 29 <span class="s2">test2</span> 30 <div class="s3">sometimes naive</div> 31 </div> 32 </body> 33 </html>
以上代码中，我们可以把浮动理解为：隐性的把内联元素转换为块级元素，但是内部的特性就是有物理特性，但是他不占据一行，对外是内联元素的属性。相当于display：inline-block。
另外：
行内元素float后，对齐于旁边元素的顶部
行内元素flaot后,可以设置宽和高，以及垂直方向上的margin。
float：用在父级元素上，在没有设置宽高的情况下，回去自适应子元素的宽高
