float: none | left | right | inherit
none:默认值，即不浮动
left：向页面的左侧浮动
right：向页面的右侧浮动
inherit：继承父元素的float值（一般不建议使用inherit，ie不支持这个选项）
重点：
1、对于块级元素来说，在不设置宽度的情况系，默认的宽度是100%，一旦设置了浮动，
它的宽度就会根据内容进行自动调整。
2、设置了浮动的元素会脱离正常的文档流，我们可以这样理解：设置浮动后，元素不仅在Y轴上浮动起来，
在Z轴上，也浮动起来。默认情况下，父元素的高度会根据子元素的内容进行调整，
而如果我们将子元素设置为浮动，父元素的高度就会变为0。
3、虽然浮动的元素脱离了文档流，但是里面的内容仍然占据空间，会根据相对位置进行布局。
这里举个例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>float</title> <style type="text/css"> .div_float{ border:1px solid #f00; float: left; } .div_none{ border: 2px solid #090; } </style> </head> <div class="div_float">div_float</div> <div class="div_none">div_none</div> </body> </html>
效果：
【 微信扫一扫 】
