版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
浮动
- 浮动的本意：让文字像流水一样环绕浮动元素
- 浮动的使用：最好不要用来布局，使文字环绕图片
- 特性：包裹性和高度欺骗性
特性一： 包裹性
<div style="border: 4px solid blue; ">
<img src = './images/avator.jpg' style="height: 100px;"/>
</div>
<div style="border: 4px solid red; float: left;">
<img src="./images/avator1.jpg" alt="" style="height: 100px;">
</div>
//图片太大，所以设置了height
以上代码效果：
block元素不指定width的话，默认是100%，一旦让该div浮动起来，立刻会像inline元素一样产生包裹性，宽度会随内容自适应 这也是通常float需要手动指定width的原因）
再加一个div效果如下
<div style="border: 4px solid blue; ">
<img src = './images/avator.jpg' style="height: 100px;"/>
</div>
<div style="border: 4px solid red; float: left;">
<img src="./images/avator1.jpg" alt="" style="height: 100px;">
</div>
<div style="border: 4px solid green;">
<img src="./images/avator2.jpg" height="100px"/>
</div>
效果非常近似于display：inline-block。但相比之下，浮动能设定左浮和右浮，但display：inline-block都是从左向右排列。（还有些细微差别，两个display：inline-block间会有空隙，但两个float没有）
特性二：高度欺骗
代码如下：
<div style="border: 4px solid blue; ">
<img src = './images/avator.jpg' style="height: 100px;"/>
<p>没有添加float的文本</p>
</div>
<div style="border: 4px solid red; ">
<img src="./images/avator1.jpg" alt="" style="height: 100px;float: left;">
<p>添加了float的文本</p>
</div>
//以上区别的是给img标签有无添加浮动
未给img标签添加float元素的时候，包裹img和p标签的div盒子的高度为他们的高度之和（不是准确的和，有重叠的部分）
给img标签加了float元素的时候，包裹img和p标签的div盒子的高度为p标签占据的高度
<div style="border: 4px solid blue; ">
<img src = './images/avator.jpg' style="height: 100px;"/>
<p>没有添加float的文本</p>
</div>
<div style="border: 4px solid red; ">
<img src="./images/avator1.jpg" alt="" style="height: 100px;float: left;">
<p style="float:left;">添加了float的文本</p>
<a>测试</a>
以上给img和p标签都添加了float属性，此时包裹他们的div的高度为a标签的高度
总结：以上结构中，div的高度由它里面包含的内容的高度撑开，当里面的内容添加了float属性后，它的父元素在计算高度的时候，会忽略添加了float属性的元素。而添加了float属性的元素本身高度依然存在
清除浮动
清除浮动的意义：即使给子元素添加了float属性，他的父元素在计算高度时依然能够获取到该元素的高度，也就是解决高度塌陷问题。
关于清除浮动可查看文章：css float浮动的深入研究
以上参考资料：
css浮动float详解
css浮动（float、clear）通俗讲解