版权声明：欢迎阅读，有误请指正，转载请申明。 https://blog.csdn.net/wx1995sss/article/details/85000678
浮动float：承接上一篇文章的BFC内容，浮动让元素块级格式化，同时元素具备三种浮动特性。
1、脱离文档流：这里做个实验，box1为宽高100px的盒子，box2为宽高200px的盒子，正常情况下如下图
给box1float：left；之后：
可以看到box1脱离了文档流，box2上移，代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body,div{margin: 0;padding: 0;}
.box1{float:left; width: 100px;height: 100px;background-color: blue;}
.box2{width: 200px;height: 200px;background-color: red;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2">这是一段测试文本</div>
</body>
</html>
细心的读者应该注意到，box2上移后，文字位置改变，即box1没有遮住文字显示效果，
2、文字环绕：float在被浏览器设置之初的目的就包含文字环绕图片效果，这里把box2宽高设置比box1小，可以看到，文字仍旧没有被遮挡。
box2宽高50px，给box1设置透明度opacity为0.8，可见文字在box1的下方仍旧以box2规定的文本格式显示。
3、浮动方向：浮动有左右浮动之分，同方向浮动元素浮动影响浮动方向，不同方向浮动元素互不影响，设置以下实验代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body,div{margin: 0;padding: 0;}
.box{width: 200px;height: 400px;background-color: gray;}
.box1{float:left;width: 100px;height:100px;background-color: green;}
.box2{float:left;width: 100px;height:200px;background-color: yellow;}
.box3{float:left;width: 100px;height:100px;background-color: red;}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
效果如图，
这里box3浮动到左边后没有继续上浮，因为box2的高度占据的空间阻挡了box3上浮，联系BFC特性，box3上层元素的高度由最高的元素高度撑起，即box2的高度。
在这里，将box2的float：left；改为float：right；效果发生变化：
以上即浮动三种特性，需要注意的是浮动脱离文档流后自成BFC，就不再撑起父元素高度。
这里推荐两种清除浮动对父元素影响的方法（更多方法各有优缺点，请网上查阅）：
1、父元素设置高度（在父元素高度确定的情况下）；
2、父元素运用伪类：
.clearfix:after{content:"";clear: both;display: block;height: 0px;visibility: hidden;}
.clearfix {*zoom: 1;}
以上内容为本人自行探索，难免错漏。写出来一方面用于交流，另一方面期盼高手过路能随意指点两手，指出本人理解有误之处，不胜感激！