浮动布局

1. float
   含义：浮动布局，使用后会使元素向左或者向右移动
   取值：
   left 左浮动
   right 右浮动
   none 【默认】不浮动
   特点：
   1、使用浮动的元素会脱离文档流【置物架】
   2、使用浮动的元素的宽、高度默认由内容决定，可设置宽、高
   3、原先所在位置就会被其他块元素填充
   4、浮动元素在一行中依次排列，当一行无法容纳的时候会自动换行
   案例：
   1、全部浮动
   2、左边浮动，右边不浮动
   3、左右浮动，中间不浮动
   中间的元素要写在最后面

    清除浮动的方式
    	1、浮动元素的父级元素： overflow:hidden;
    	2、浮动元素的父级元素： ::after{clear:both;content:'';display:block;}
    	3、浮动元素的同级：添加一个空标签，并且设置clear:both;
    1) 七列布局
    2) nav的伪元素竖线
    拓展
    	如何让元素使用margin:0 auto，水平居中
    	只对块级元素生效，所以margin:0 auto的用法分为三种，分别为
    		块级元素：div、h1~h3、ul
    			/*对于块级元素，只需要设置width*/
    			div{
    				width: 200px;
    				background-color: #ccc;
    				margin:0 auto;
    			}
   
    		行内元素：span、a
    			/*对于行内元素，需要先设置为块级元素，再加宽度*/
    			span{
    				display: block;
    				width: 100px;
    				background-color: red;
    				margin:0 auto;
    			}
   
    		行内块元素：button、img、input、textarea
    			/*对于行内块级元素，需要设置为块级元素，可以不用设置宽度*/
    			input{
    				display: block;
    				margin:0 auto;
    			}