什么是浮动
浮动，脱离html文档正常文档流而单独存在的元素，css样式中为float属性，其属性值有三个：left|right|none，含义顾名思义，且兼容市面所有浏览器，但是浮动的原始作用是什么呢？ > 我们会发现，目前流行采用浮动方法实现的无论是分栏布局，还是列表排列我们都可以用其他一些CSS属性（不考虑table）代替实现，唯一一个实现不了的就是“文字环绕图片”，我是想不出来能有什么方法可以让文字环绕图片显示。好，这个替代不了的作用才是float真正的意义所在。此作用类似于word中的版式，很基础的原始的作用
所以浮动的原始作用即使实现文字环绕。
浮动的特性
- 包裹性：我们经常看到div盒子在内部有元素的时候其宽度是其父级元素宽度的100%，但是当该div添加了float为非none属性以后，其宽度就是内容的宽度了，这就是包裹性。
- 破坏性：破坏性指的是浮动元素对它后面元素（非之前的元素）的影响，它会破坏后面元素的布局，因为浮动会在其父级元素所能活动的框内按照浮动方向进行脱离文档流存在。 ## 为什么要清除浮动 因为浮动有破坏性，会破坏它后面的元素的位置，同时浮动由于脱离文档流存在，所以导致他的父级元素的高度会塌陷，这样的情况下父级元素后面的元素就会占用原本属于浮动元素的位置，但是浮动元素还是会占用该块区域同时影响父级后面元素的布局，使得父级元素后面元素对该浮动块产生文字环绕，如此便会破坏后面的元素的布局。 ## 怎样清除浮动对后面元素产生的影响
- clear清除浮动 后面元素采用clear属性清除浮动对其产生的影响
- bfc清除浮动影响： 触发后面元素产生格式化上下文，使得内部元素与外部绝缘，清除浮动元素，触发bfc的常用方式就是overflow：hidden
-
一般清除浮动对后面元素影响的做法：在浮动元素的父元素内部清除浮动，同时解决浮动产生的父级元素高度塌陷，
方法1：给父级元素添加overflow：hidden属性；
方法2：在父元素内部最后添加div并添加clear属性(兼容所有浏览器)
（如果在不考虑兼容性的情况下可以使用伪类:after进行清除，例如：**:after{clear:both;display:block;content:””}）
演示程序：清除浮动的方式
清除浮动代码说明
- 在1中
参考文档：