float属性
当页面出现多个块元素时，块元素自动换行，每行分布一个块元素，如果我们想将块元素并排，可以使用float，将块元素浮动，如何更好的理解浮动概念：页面是一块木板，块元素是一个个方块积木累加在一起，当对块元素使用float声明后，他就脱离了木板，暂时的漂浮在上方。
- float:left;左浮动，同时有a和b两个块元素，对b声明float:left;后，b浮动在a的上方，若a有文字，则文字被挤出显示。可见图片如下：
- float:right;右浮动，浮动后靠右边显示
- float:none;默认值，元素不浮动
可能出现的问题：添加了float声明的元素脱离了文档流（自上而下，自左到右的顺序），导致div高度塌陷，可以通俗理解为，div里的元素都飘起来了，div没有东西可以包裹了，可以观察一下下图的实例：
为了避免高度塌陷，可采用四种方法
1.在浮动元素后面加一个空白div,对空白div添加属性声明clear:both;
需要注意写在浮动元素下面，写在外面无效
2. 给父元素设置高度
缺点是扩展性低，高度被框定了，如增加新元素还需要再修改父元素高度，一般不推荐使用
3. 给父元素添加属性声明overflow:hidden;
缺点是内容可能会被overflow的作用裁剪掉
4. 给父级添加伪类after
.类名::after{ content:''; display:block; clear:both; }
overflow拓展
- overflow:visible; 默认属性，超出部分不会被裁剪，会展示在盒外
- overflow:hidden; 超出内容会被裁剪，且不可见
- overflow:scroll; 超出内容会被裁剪，有横向和纵向的滚动条可查看
- overflow:auto; 如果内容被裁剪了，那么将会出现滚动条（与scroll的区别：scroll默认有滚动条；auto有需要的时候才会出现滚动条）
