浮动的作用
包围文本
横向排列（因为行块盒会空白折叠）
浮动的特点
修改float属性
left 左浮动 上左
right 右浮动 上右
默认为none
1.一个元素浮动以后，必定是块盒。
2.浮动元素的包含块，为父元素的内容盒。
盒子尺寸
1.宽度为auto时，适应内容宽度。常规流时，撑满内容盒。
2高度为auto时，与常规流一样，适应内容高度。
3.margin为auto时，四个方向都为0、常规流左右margin会吸收剩余空间，但是比宽度的吸收能力弱。
4.边框，内边距，百分比的设置与常规流一样，相对于父元素内容的宽度。
盒子位置
1.左浮动的盒子靠上左排列
2.有浮动的盒子靠上靠右排列
3浮动盒子在包含块中排列时，会避开常规流的盒子。
4常规流块盒在排列中，无视浮动盒
5行盒在排列中会避开浮动盒子
如果文字没有在行盒中，浏览器会直接生成一个行盒包裹文字，该行盒为匿名行盒。
所以有文字环绕效果。