浮动与清除浮动

浮动：使元素脱离文档流，按照指定方向（左右）发生移动，遇到父边界或者相邻的浮动元素停下来，脱离文档流。

文档流：是文档中可显示对象在排列时所占用的位置/空间(在页面中占位置)。

脱离文档流：在页面中不占位置 ，CSS 中通过 float 属性实现元素的浮动。

1. 浮动

float
值：left(左浮动) right(右浮动) none(不浮动)

.f-l{
    float: left;
}
.f-r{
    float: right;
}

2. 浮动特性

1. 排列规则：
   1. 第一个浮动元素遇到父级边缘的时候停止浮动。
   2. 其它元素在遇见相邻浮动元素的时候停止。
   3. 当父元素宽度不够时，浮动元素换行显示。但是，在换行的过程中有元素高度比换行前相邻元素高的时候，元素就会被“卡”住。
2. 宽高特性：
   1. 无论什么类型的元素，只要浮动就支持设置宽高，但是当未设置宽高时由内容撑开。
   2. 支持margin，但不支持 margin:auto。
3. 层级特性：
   1. 浮动元素之后未浮动元素会在浮动元素的下方显示，但是浮动元素之前的未浮动元素不会被影响，因为浮动元素只能对后面的元素产生影响。
   2. 文字不会出现在浮动的元素的下方而是围绕浮动元素显示。
4. 浮动元素与行块级元素的对比：
   • 共同点：
     1. 横排显示。
     2. 支持宽高，没有宽高，则内容撑开。
     3. 支持margin,padding，不支持margin:auto。
   • 不同点：
     1. 行块级，不脱离文档流。浮动，脱离文档流。
     2. 行块级，解析空格。浮动不解析空格。

3. 清除浮动

浮动造成父级元素坍塌，最好的解决方法：伪类

.clearfix:after{
    content: '';
    display: block;
    clear: both;
}