CSS3-浮动和定位-D1

一，浮动的基本概念
1，浮动：用来实现并排
float:left;
float:right;

2，要浮动，并排的盒子都要设置浮动

3，父盒子要有足够的宽度，不然子盒子会掉下去

4，浮动的顺序贴靠
优先去寻找他前面的兄弟盒子贴靠

5，浮动的元素一定能设置高度和宽度

6,盒子不要平白无故设置浮动

二，使用浮动实现网页布局
1，并排显示的盒子要设置浮动，
垂直方向的盒子不需要用浮动

2，大盒子带着小盒子跑

3，div是免费的，不要节省div盒子

4，浮动不能继承

二，BFC规范和浏览器差异
现象：一个盒子不设置高度height，当子元素都浮动时 父盒子是无法撑起它自身的，因为盒子没有形成BFC，那就不稳定了

1，BFC的作用
可以让盒子达到独立稳定
清除浮动
可以取消margin塌陷
可以阻止元素被浮动元素覆盖

2，创建BFC
①float的值不是none
②position不是static或者relative
③dispaly是inline-block或者是inline-flex
④overflow:hidden;（好办法）

3，overflow:hidden;溢出隐藏

4，浏览器差异
如果制作IE6,7网页时
内部有浮动的盒子要设置height属性，规范编程

三，清除浮动
浮动一定要封闭到一个盒子中，否则就会对页面的后续元素产生影响

1，方法一：
overflow:hidden;

2,方法二：（margin无效，不好用！）
给后面的父盒子添加
clear:both;

3,方法三：
用::after伪元素给所有父盒子添加最后一个子元素，并且给::after设置clear:both;
.clearfix::after{
content:‘’;(内容一定要写)
clear:both;
display:block;（转为块级元素）
}

4，添加“隔墙”
在两个父盒子之间添加一个隔墙，隔墙是带着clear:both的盒子,并且给这个隔墙添加高度就相当于盒子之间的margin
比如：

h20{
height:20px;
}

四，相对定位position:relative;
1，基本理论
相对于原来的位置移动，但是会在老家留坑，渲染出来的形状可以看成是影子
top:3px;（从上往下移动3px）
top:-3px;（往上移动3px）

2，作用
用来微调位置，比如鼠标位于的导航条的变化

用来参照绝对定位的位置

五，绝对定位position:absolute;
1，基本理论
会脱离文档流
（还有浮动，固定定位也会脱离文档流）
top:3px;（距离上边缘3px）
left:3px;（距离左边缘3px）

2，参考位置
以离自己最近的拥有定位属性的祖先盒子作为参考标准（父绝子绝，父相子绝）

3，居中
垂直居中
top:50%;
top:-自己高度;
水平居中
left:50%;
left:-自己宽度;

4，用途
用来制作压盖，遮罩的效果（轮播图的左右按钮和小圆点）
实际开发中设置a标签的href="#"或者设置href="javascript:;"禁止链接刷新或跳转
cursor:pointer;（鼠标是小手）
结合css精灵使用
结合JS实现动画

六，固定定位
position:fixed;
以屏幕作为参考标准
脱离文档流
bottom:10px;（距离下边缘10px）
用于置顶按钮

总结：
重点
浮动要注意什么？
浮动有哪些性质？
1，父子盒子要有足够的宽度，不然子盒子会掉下来；
要浮动都浮动，有一个兄弟盒子浮动，那么其他的兄弟盒子也要浮动，不能有的浮，有的不浮；

2，浮动有顺序贴靠的性质，3个盒子同时左浮动，3号盒子会优先贴靠2号盒子，如果父盒子不够宽，3号盒子会掉下来贴1号盒子，如果贴不到1号就会贴父盒子的边

3，浮动会使元素脱离标准文档流，无论是行级还是块级元素，只要有浮动就能设置宽高了。

如何清除浮动？
一个盒子里面有元素浮动了，那父盒子要有高度或者要清除浮动才不会影响后面的盒子，使用overflow:hidden;/添加clear：both;/添加::after伪元素/隔墙

定位有哪几种？
相对定位：微调元素位置，老家留坑，形影分离，成为绝对定位参考盒子
绝对定位：压盖，遮罩
固定定位：固定位置

难点：
什么是BFC？
BFC是 块级格式化格式化上下文
如何创建BFC？
BFC有哪些作用？

绝对定位如何实现垂直居中？