浮动对于前端小白学员来说是一个重难点，今天主要给大家介绍下关于浮动的起源、浮动语法、浮动特性、浮动的破坏性、什么是文档流、什么是脱离文档流等来给大家说一说，有问题的小伙伴欢迎随时评论否通。
浮动的起源
关于浮动的起源，一开始，浮动的目的只是达成 “图文环绕”效果
<img src="sc.jpg" align="left" />
在img的标签上面，可以添加align，用于控制图片浮动的方向，向左 or 向右
后来我们将这样的特性添加到css中，可以对任何元素使用
<img src="mao.jpg" style="float:left;" />
效果和上面直接添加align="left" 是一样的
浮动语法：
float: left / right / none / inherit（继承）;
浮动的特性：
1） 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
2）一行可以显示多个元素
3）支持宽高
4）宽高由内容撑开
5）元素浮动后，上下margin不再叠加
6）元素浮动后，可以阻止子级元素的margin传递
浮动的破坏性：
脱离文档流
什么是文档流？
“normal flow” 文档流，也叫正常流、普通流。指页面中默认布局：元素从左至右、从上到下显示。
什么是脱离文档流？
从正常流布局中脱离出来。
为什么文字可以围绕在浮动元素的周围？
文本流：指HTML文本的显示，相对于文字段落来说的。文字会认同浮动元素所占有的位置，围绕它进行布局，也就是浮动元素并不会脱离文本流，只会脱离文档流
