float，css的一种属性，主要属性值为：left（左浮动）、none（不浮动）、right（右浮动）、inherit（继承父元素浮动），多用于网页排版。
float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
扩展资料
CSS属性
1、整数和实数
在CSS中只能使用浮点小数，而不能像其他编程语言那样使用科学记数法表示实数，即1.2E3在CSS中将是不合法的。下面是几个正确的例子，整数：128、-313，实数：12.20、1415、-12.03。
2、长度量
相对长度单位有：em——当前字体的高度，也就是font.size属性的值；ex——当前字体中小写字母x的高度；Dx——一个像素的长度，其实际的长度由显示器的设置决定，比如在800木600的设置下，一个像素的长度就等于屏幕的宽度除以800。
3、百分数量（percentages）
百分数量就是数字加上百分号。显然，百分数量总是相对的，所以和相对长度量一样，百分数量不被子级元素继承。
参考资料来源：百度百科-CSS
参考资料来源：百度百科-FLOAT
第一种 和第二种 的原理是一样的。所以速度是一样的。第3种属于内部调用，速度最快。但是不标准。
给说下 调用的理论。
浏览器解释是逐句解释。遇见 先解释标签，然后标签属性。
第一二种的原理是一样的，
1.浏览器遇见 div标签以后 解释好；
2.然后解释他的CLASS属性，解释CSS属性的值是1个（2个）类名；
3.然后查询事先预载好的<style>标签里的属性；
4.然后赋给<DIV>标签。
5.读取赋值后的属性显示内容。
第三种的原理，
1.浏览器遇见 div标签以后 解释好；
2.然后解释他的style属性；
3.直接读取style属性 显示。
但是建议你使用前一种原理，不经这种熟读不在考虑范围之内，就算再大的网站也不会占用太多的速度。理论上说三种速度最宽，但是现实中 前2种是最好最实用的。
是有些区别的哦。
首先我们来看一下“*=”的定义，以“[foo*="bar]”为例，描述：选择foo属性值中包含子串“bar”的所有元素。
而“~=”即根据属性值中出现的一个用空格分隔的词来完成选择。重点在于“空格”，下面的例子可以帮助你体会一下。
HTML
<img src = "images/1.jpg" title="Christmas"><img src = "images/2.jpg" title="Xmas">
CSS
img[title*="mas"] {border: 5px solid orange
}
结果：两张图片的边框为橘色。匹配到含有子串“mas”元素。
img[title~="mas"] {border: 5px solid orange
}
结果：两张图片的边框没有变化。没有一个可以匹配到，因为"mas"前面没有空格隔开。
再看下面的一个例子
HTML
<img src = "images/myroom.jpg" alt="myroom>CSS
img[src*="room"] {border: 5px solid green
}
结果：以"myroom"为名称的图片边框变成绿色。
img[src~="room"] {border: 5px solid green
}
结果：以"myroom"为名称的图片边框无变化。道理和上面一样，要有空格隔开。
结论：
虽然“~=”定义能用于任何属性，但css图片、文件夹的名称不能允许有空隔（一般会用下划线代替），所以“~=”可以说是不能用于src属性。而“*=”是能用于任何属性。
希望能帮到你！
