1、浮动的定义
使元素脱离文档流，按照指定方向（左右）发生移动，
遇到父级边界或者相邻的浮动元素停了下来。
文档流
是文档中可显示对象在排列时所占用的位置/空间(在页面中占位置)
脱离文档流：在页面中不占位置
（1）浮动一般情况
当把框 1 向右浮动时，它脱离文档流并且向右移动，
直到它的右边缘碰到包含框的右边缘
image.png
image.png
image.png
（2）浮动特殊情况
1、当框 1 向左浮动时，框1不占空间，相当于悬浮，
框1覆盖住了框 2，使框 2 从视图中消失。
image.png
2、给了浮动的元素，只会影响后面的元素；(任何元素都可以浮动)
如果父级宽度太窄，无法容纳所有的浮动元素，无法容纳的浮动
元素会往下掉
image.png
3、如果浮动元素的高度不同，那么当它们向下移动时�可能被其它浮动元素“卡住”
image.png
3、浮动对文字影响
浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。
因此，创建浮动框可以使文本围绕图像
image.png
4、浮动和inline-block的对比
image.png
5、清除浮动
浮动导致父元素的塌陷，所以要清除浮动
清除浮动 clear:
left right both none
清除浮动的方法
1、子级办法
子级最后添加空标签
父级办法
1、加高 问题：扩展性不好
2、inline-block 清浮动方法 问题：margin:auto;失效
3、overflow:hidden 清浮动方法； 问题：要配合宽度
4、after伪元素内部末尾添加内容 时下主流
.clearfix{zoom:1;}.
clearfix:after{content:'';display:block;clear:both;}
6设置元素宽度大小值min-width
设置元素的最小宽度
max-width
设置元素的最大宽度
