css的布局方式（浮动布局，定位布局，伸缩盒）

6. 布局
   使用块元素搭建网页结构,改变默认文档流的方式，让其在一行中显示多列。【让块在一行中显示】

    <div>
    	<div></div>
    	<div></div>
    	<div></div>
   </div>
   <ul>
    	<li></li>
    	<li></li>
    	<li></li>
   </ul>
   

   浮动布局
   float (为了让块元素在一行显示)
   float:left 向左浮动
   right 向右浮动
   可以使块元素脱离当前的文档流
   1) 宽度如果没有手动指定那么就由内容决定
   2) 多个浮动元素在一个浮动流中并排显示，如果一排放不下就会自动换行
   3) 浮动元素失去了对父元素的支撑

clear（清理浮动）
clear:left
right
both
清理左边/右边/左右两边的浮动元素，一般使用这个特性强制子元素换行，达到支撑父元素的目的
一行多列：
全部浮动

		ul>li{
			float:left
		}

一行两列
方法一：
两列都浮动

			 		.left {float:left }
					.right {float:right; }

方法二：
一列浮动，一列添加margin-left

			.left {float:left; width:200px}
			.right {margin-left:220px;}

overflow
overflow-x
overflow-y
auto/none/visible/scroll
当父元素的宽/高固定，子元素的宽/高超过了父元素就可以使用这个特性

display
block/inline/inline-block/…
块/行内/行内块
行内块
可以与其他行内元素共享一行空间
可以指定宽高

定位布局
position
static 静态（默认） 非定位元素
relative 定位元素（相对定位）
参照点：原先所在的位置
特性：不脱离文档流（宽度默认为为100%，原来在文档流的位置不会被抢占），但是可以覆盖在其他元素上
absolute 定位元素（绝对定位）
参照点：距离它最近的父定位元素，如果没有，参照视口
特性：脱离文档流（宽度由内容决定，原来在文档流的位置被其他元素抢占）
fixed 定位元素（固定定位）
特性：脱离文档流
参照点：相对于浏览器视口，并且不会随着网页的滚动而滚动
sticky 定位元素（粘滞定位 【CSS3新特性】）
特性：不脱离文档流
是relative与fixed的集合，使用top/left/right/bottom设置过渡点，当超过了这个临界点，就提现fixe固定在网页中的特性
只能定位元素才能使用定位属性
top 、left、bottom、right
改变定位元素在z轴中的位置
z-index
默认为0，值越小越靠下
伸缩盒
作用：主要应用在响应式(网页可以随着终端的屏幕尺寸合理调整布局)布局中
应用：
1. 父元素(宽高都需要明确)
display:flex
flex-direction:row/column
flex-wrap:nowrap/wrap
2. 子元素
flex-basic
flex-grow:
flex-shrink:
flex:grow shrin basic;
flex:grow;