浮动：使元素脱离文档流，按照指定方向（左右）发生移动，遇到父边界或者相邻的浮动元素停下来，脱离文档流。
文档流：是文档中可显示对象在排列时所占用的位置/空间(在页面中占位置)。
脱离文档流：在页面中不占位置 ，CSS 中通过 float 属性实现元素的浮动。
1. 浮动
float
值：left(左浮动) right(右浮动) none(不浮动)
.f-l{
float: left;
}
.f-r{
float: right;
}
2. 浮动特性
-
排列规则：
- 第一个浮动元素遇到父级边缘的时候停止浮动。
- 其它元素在遇见相邻浮动元素的时候停止。
- 当父元素宽度不够时，浮动元素换行显示。但是，在换行的过程中有元素高度比换行前相邻元素高的时候，元素就会被“卡”住。
-
宽高特性：
- 无论什么类型的元素，只要浮动就支持设置宽高，但是当未设置宽高时由内容撑开。
- 支持margin，但不支持 margin:auto。
-
层级特性：
- 浮动元素之后未浮动元素会在浮动元素的下方显示，但是浮动元素之前的未浮动元素不会被影响，因为浮动元素只能对后面的元素产生影响。
- 文字不会出现在浮动的元素的下方而是围绕浮动元素显示。
-
浮动元素与行块级元素的对比：
- 共同点：
- 横排显示。
- 支持宽高，没有宽高，则内容撑开。
- 支持margin,padding，不支持margin:auto。
- 不同点：
- 行块级，不脱离文档流。浮动，脱离文档流。
- 行块级，解析空格。浮动不解析空格。
- 共同点：
3. 清除浮动
浮动造成父级元素坍塌，最好的解决方法：伪类
.clearfix:after{
content: '';
display: block;
clear: both;
}
