float与position间的区别：
个人理解为：脱离文档流不一定脱离文本流；但脱离文本流，则也脱离文档流。【如有更好的理解还望评论区一起探讨，共同学习进步】
一、float 浮动(脱离文档流，不脱离文本流)
float的两种功能作用：
a.元素脱离文档流，但不脱离文本流。(即：该元素区域浮动起来，但是处于元素里面的文本信息不会脱离文档)
b.当行内元素使用float浮动时，类似于将该元素设置为行内块级元素，可以为其设置宽高并在一行显示。
示例代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动与定位小区别</title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ width: 200px; height: 200px; } .one{ float: left; /*position: absolute;*/ background: #bfe; margin-top: 40px; } .two{ /*珊瑚色*/ background: coral; } </style> </head> <body> <div class="one"></div> <div class="two">浮动文档流测试</div> </body> </html>
二、position 定位(脱离文档流也脱离文本流)【相关position知识前面随笔有提及，这里使用absolute为例】
position:absolute; 绝对定位；脱离文本流，不保留原来的位置空间。
示例代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动与定位小区别</title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ width: 200px; height: 200px; } .one{ /*float: left;*/ position: absolute; background: #bfe; margin-top: 40px; } .two{ /*珊瑚色*/ background: coral; } </style> </head> <body> <div class="one"></div> <div class="two">相对定位文本流测试</div> </body> </html>
三、float 浮动 【父元素float浮动对子元素float浮动产生的影响】
说明：当父元素定义为float时，其是脱离文档流的，但当其子元素再设置为float浮动时，子元素只会含有
float的另一功能，将行内元素【内联元素】转化为行内块级元素，而且脱离文档流的特性不会显现出来。
示例代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style=" 400px;height:200px;background:cyan;"> <span style="float:left; auto;height:100%;background:coral;"> <i style="background: #bfe;float: left; 100px;">hello world</i> </span> </div> </body> </html>