整体介绍
浮动 1)浮动的基本概念 2)使用浮动实现网页布局 3)BFC规范和浏览器差异 4)清除浮动 定位 1)相对定位 2)绝对定位 3)固定定位 小慕医生项目开发
浮动的基本概念
浮动用来实现并排
浮动的最本质功能：用来实现并排
浮动的使用
浮动使用要点：要浮动，并排的盒子都要设置浮动 父盒子要有足够的宽度，否则子盒子会掉下去
浮动的顺序贴靠特性
子盒子会按顺序进行贴靠，如果没有足够空间，则会寻找再前一个兄弟元素
浮动的元素一定能设置宽高
浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律能够设置宽度和高度，即使它是span或者a标签等
右浮动
float:right;即可设置右浮动
使用浮动实现网页布局
注意事项
- 垂直显示的盒子，不要设置浮动，只有并排显示的盒子才要设置浮动！
- “大盒子带着小盒子跑”，一个大盒子中，又是一个小天地,内部可以继续使用浮动
红条纹上方蓝色盒子并没有浮动，而是被整体蓝色盒子带着跑的，因为蓝色大盒子是右浮动的
3. 超市售卖的塑料袋0.3元一个，div是免费的！不要节约盒子！
请动手练习！本节案例是网页布局
BFC规范和浏览器差异
BFC规范
BFC(Box Formatting Context,块级格式化上下文)是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
一个现象
一个盒子不设置height,当内容子元素都浮动时，无法撑起自身 因为这个盒子没有形成BFC
如何创建BFC
方法①：float的值不是none 方法②：position的值不是static或者relative 方法③：display的值是inline-block、flex或者inline-flex 方法④：overflow:hidden;
什么是overflow:hidden;
overflow:hidden;表示溢出隐藏，溢出盒子边框的内容将会被隐藏 overflow:hidden;是非常好用的让盒子形成BFC的方法 注意： 溢出盒子边框的内容将被隐藏，但是盒子的padding部分的溢出还在
BFC的其它作用
BFC可以取消盒子margin塌陷 BFC可以可以阻止元素被浮动元素覆盖
浏览器差异
IE6、7浏览器使用haslayout机制，和BFC规范略有差异，比如IE浏览器可以使用zoom:1属性“让盒子拥有layout’
如果要制作兼容到IE6、7的网页时，尽量让网页布局变得简单，内部有浮动的盒子要设置neight属性，规范编程，不要”玩杂技”
清除浮动
方法一
清除浮动方法1：让内部有浮动的父盒子形成BFC,它就能关闭住内部的浮动。此时最好的方法就是overflow:hidden属性。
方法二
清除浮动方法2：给后面的父盒子设置clear:both属性。 clear表示清除浮动对自己的影响，both表示左右浮动都清除
方法三
清除浮动方法3：使用::after伪元素给盒子添加最后一个子元素，并且给after设置clear:both。
记得转为块级元素
方法四
清除浮动方法4：在两个父盒子之间“隔墙”，隔一个携带clear:both的盒子
相对定位
位置描述词
left向右移动；right向左移动；top向下移动；bottom向上移动 值可以为负数，即往规定方向相反移动
相对定位性质
相对定位的元素，会在“老家留坑”，本质上仍然是在原来的位置，只不过渲染在新的地方而已，渲染的图形河以比喻成“影子”，不会对页面其他元素产生任何影响
相对定位用途
相对定位用来微调元素位置 相对定位的元素，可以当做绝对定位的参考盒子
绝对定位
绝对定位：盒子可以在浏览器中以坐标进行位置精准描述拥有自己的绝对位置
位置描述词
绝对定位脱离标准文档流
绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对它们进行压盖
脱离标准文档流的方法：浮动、绝对定位、固定定位
绝对定位的参考盒子
绝对定位的盒子并不是永远以浏览器作为基准点 绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点。这个盒子通常是相对定位的，所以这个性质也叫作“子绝父相’
绝对定位的盒子垂直居中
绝对定位的盒子垂直居中是一个非常实用的技术
水平居中同样道理 注意：为何使用此种方法，因为绝对定位脱离了标准文档流
堆叠顺序z-index属性
z-index属性是一个没有单位的正整数，数值大的能够压住数值小的
绝对定位用途
绝对定位用来制作“压盖”、“遮罩”效果 绝对定位用来结合CSS精灵使用 绝对定位可以结合S实现动画
提示：实际开发中不建议去掉href属性，而是建议设置href=”#“或者设置href=“javascript:;“禁止链接刷新或跳转。
共性与个性： <a class=“leftbtn btn”></a> <a class=“rightbtn btn”></a> btn是他们的共性，leftbtn和rightgtn是他们的个性
本节绝对定位案例是轮播图制作
固定定位
固定定位注意事项
固定定位只能以页面为参考点，没有子固父相这个性质 固定定位脱离标准文档流
固定定位的用途
用途比如返回顶部按钮，白天黑夜模式切换按钮以及楼层导航