浮动是css中元素的属性float，默认值为none。当值不为none时，意味着元素脱离了常规文档流，我们需要研究的就是脱离了文档流之后元素的摆放规则，从而知道他的摆放位置。
当元素的float属性值为left或者right时，这个元素就是浮动元素，具体浮动规则为：
1、左浮动：脱离了原来位置之后先向上浮动再依次从左往右排列。
2、’右浮动：脱离原来的位置之后先向上浮动再依次从右向左排列。
3、浮动盒子的顶边不得高于上一个盒子的顶边
4、若剩余空间无法放下浮动的盒子，则该盒子向下移动知道具备足够的空间能够容纳这个盒子，然后再依次从左向右（左浮动）或者从右向左（右浮动）排列。
由于元素脱离常规文档流之后的摆放位置会重新规划，则之后的其他元素位置也会受到影响。之后盒子的摆放规则为：
1、常规流盒子遇上浮动盒子时无视浮动盒子
2、当浮动流盒子遇到常规流盒子时避开常规流盒子
由于元素浮动之后脱离了常规文档流，会造成常规流盒子在计算自动高度（high：auto）时无视浮动盒子，这种现象叫做高度塌陷。比如说一个无序列表ul的子集li浮动了，则这个ul的高度会变成0。
解决高度坍塌（找回高度）的方法有：
1、直接给浮动元素的父元素设置高度
2、为其他受浮动影响的常规流盒子添加属性：clear，属性值为left|right|both；
3、位浮动元素的父元素设置属性：overflow：hidden。
