float的讲解：
| 初衷 | 例子 | 原理 |
| 实现图片文字的环绕效果 | 通过float，跳出了包裹自己的盒子，合盒子里面没有内容，那么height变为0；那么紧跟着本盒子的其他盒子就会往上移动，但是float后的元素并没有跳出文本流中，任然占有文本流的空间，其他盒子网上移动的过程中float后的内容就会去自动去拼接上移盒子中的内容，（但是两部分内容是独立的,可以通过margin: 0 50px 5px 0; 来设置间距）因此就会出现文字环绕的效果。 |
如何实现只浮动，盒子高度不为0呢？（清出浮动的影响）
p { clear: both; } ；在紧接着浮动的元素上加上该样式；
效果是：让装有浮动的盒子保持高度；
1、flaot以后，display的值变为:block;还会去除空格；
2、flaot和position:relative同时使用：
.t2{
background-color: red;
position: relative;
top: 50px;
right: -50px;
float: right;
}
效果为：先在原来的位置相对偏移以后，在执行float的浮动效果，都没有脱离标准流；
3、如果position:absolute,和float同时出现的话，那么float失效，因为position：absolute是将元素脱离了标准流；所以flaot不起作用。
补充：加了定位（position）以后，层高于标准流中的值；
CSS中float专题
原文地址：https://www.cnblogs.com/helei747123/p/9239941.html