布局

布局：
默认文档流：
从上到下从左到右的基础文档流

1.display:
	inline:将块级元素转换为行内元素
	block：将行内元素转换为块级元素
	inline-block：将当前元素转换为兼具行内和块级元素特性的元素
2.浮动布局
1. float
	含义：浮动布局，使用后会使元素向左或者向右移动
	取值：
		left	左浮动
		right	右浮动
		none	【默认】不浮动
	浮动元素对于文字不会遮挡
	块级元素设置了浮动属性之后失去了独占一行的特性
	行内元素设置了浮动属性之后，可以设置宽高属性
	中间的元素要写在最后面
	**特点：**
		1、使用浮动的元素会脱离文档流【置物架】
		2、使用浮动的元素的宽、高度默认由内容决定，可设置宽、高
		3、原先所在位置就会被其他块元素填充
		4、浮动元素在一行中依次排列，当一行无法容纳的时候会自动换行
**浮动何时停止？**
	1.遇到父级边框时停止浮动
	2.遇到其他浮动元素时停止浮动
清除浮动：
	clear:
		left
		right
		both
	1.在所有浮动元素之后添加一个块级元素
		给块级元素设置清除浮动属性
	2.给所有浮动元素的父元素添加::after{
		content:'';
		display:block;
		clear:left
	}

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;
			}