原文链接： https://blog.csdn.net/qq_22855325/article/details/78015502
个人总结：
1、float的原始意义： 使文字环绕在图片周围，仅此而已。
实现原理： float属性可以使图片（img）脱离文档流，但是它还占据正常文档流的文本空间，浮动 后的图片可以浮在其他元素之上，但是图片不会遮挡文字，文字环绕在图片的周围。
2、float的2个属性
①包裹性：添加了float属性的元素会自动加上一个“块级框”，即可以设置元素的宽高。
就float的包裹性而言，其实和display： inline-block；属性的效果是一样的。会在水平方向上排列，并且可以设置元素的宽高。唯一的区别就是：float是有方向性的，display: inline-block;是没有方向性的。
②破坏性：float属性破坏元素的inline-box模型，使之没有line-height值（文字环绕图片、父级元素的高度塌陷 问题）
3、float的应用：
①水平导航，图片水平摆放
当图片是等高等款的，float和dispay: inline-block;等效的。但是当图片的高度不相等时，最好使用display: inline-block;特性；水平导航时使用display：inline-block；由于空格符、换行符、制表符占据一定宽度，所以会有水平间距出现（解决多种方法。），此种情况最好使用float属性。
②分栏布局
使用float+margin实现分栏布局
4、清除浮动
因为float的破坏性，使元素的line-heigt的值为0，其腹父级获取不到高度，发生高度塌陷的问题。
清除浮动的方法：
a、利用clear属性清除浮动
b、利用BFC原理包容浮动
a类利用clear：both；属性清除的方法有添加空的div标签和属性的after伪类。
