浮动布局
只能在父元素内浮动，而不是在整个页面，在布局的时候即像是块级元素可以设置宽和高，又像行内元素可以挤在一行，又同时可以设置它的浮动值为left或者是right，让它向左或者是向右靠拢，一直碰到它的父容器的边界或者是排在前面的元素才会停止，而在浮动元素之后的普通元素则会装做浮动元素根本不存在的样子直接布局，这样子在页面上看来浮动元素在上普通元素在下，形成了两层叠放在父级容器当中并且浮动元素会遮住普通元素，不过普通元素中的文字会识别到浮在上面的浮动元素绕开浮动元素，形成了图文混排的需求。
定位布局
在文档流中任意一个元素位置调整都会影响到后面的元素，简直是牵一发而动全身，有一种脱离文档流的解决办法就是浮动布局，但是浮动的规则局限性很大，会向左上角或者右上角靠去，但是这两个方向并不是布局的全部，日益增长的网页复杂度和落后的CSS的布局方式之间的矛盾越来越大，让定位需求变的越来越复杂：
- 让元素可以相对于它自己的位置定位：比如元素相对于自身发生一点偏移，可以先设置元素的postion为relative，让元素准备偏移，接下来设置top,right,bottom或者left来让元素位移，必然top:20px这意味着元素上边界与它原本位置的上边界距离20像素，bottom:20意味着元素下边界与它的原本位置的下边界距离20像素，left和right一个控制左边界，一个控制右边界，也是一样的道理。 注意：相对定位元素没有脱离文档流 对非定位元素设置top等方向属性是没有效果的
- 让元素可以在某个祖先级容器范围内任意位置定位：比如想让元素对某个祖先级元素容器定位，这就意味着元素不被局限在父容器内，浮动只能在父容器内。这就需要完全脱离文档流的定位方式，position:absolute绝对定位，不再区分这个元素是块级元素还是行内元素，它的父容器会将它视为不存在，对它的祖先设置标识postion:relative，让它可以相对于被标识的元素定位，最后通过top和right设置它在指定容器中的位置，被绝对定位的元素是没有设置宽和高的，脱离了普通文档流并且不预留任何空间，因此它会按照内容大小弹性地调整大小，当然也设置固定的宽高。
- 让元素可以在屏幕范围内任意位置定位：比如让元素保持在页面右下角，在屏幕滚动时不会改变，是以视窗为画布来定位的，即使页面上下滚动，它还是会固定在相同的位置，所以为元素设置position:fixed固定定位，这个需求和上一个需求是非常类似的，同样的也会脱离文档流，只不过一个是相对于某个祖先级元素定位一个是相对于视窗定位。要设置它的宽高和位置，不同的是并不需要为它设置目标容器，因为它的目标就是页面的可视部分。
弹性盒子
这是一种布局神器，可以很便捷的实现纵向或者横向排列。弹性盒子只对它的子元素生效，所以需要在它的父元素这里实现弹性盒子，在没有使用弹性盒子的时候，div默认纵向排列，只需将display属性设置为flex，然后在它的子元素设置flex-flow:row这是横向的布局方式，flex-flow:columu而这是纵向的布局方式，align-items:center这是元素的居中对齐，设置了这个justify-content会让子元素在父级中平均布局。
