css3入门(4)浮动和定位

浮动

• 左浮动 flout：left；
• 右浮动 flout：right；
• 要浮动，并排的盒子都设置浮动
• 父盒子要有足够的宽度，要不然子盒子会掉下去

顺序贴靠

• 当子盒子没有足够空间掉下去时，会按顺序找他前面的兄弟

浮动元素一定能设置宽高

• 浮动元素，会脱离标准文本流，一定可以设置宽高

注意事项

• 垂直显示的盒子不要设置浮动，只有并排显示的盒子才要设置
• 大盒子带着小盒子跑
• 多套div，不用节约盒子

BFC规范

• 就是盒子的稳定状态

创建BFC

• flout的值不是none
• position的值不是static或者relative
• display的值时inline-block，flex或者inline-flex
• overfloe：hidden

overfloe：hidden

• 表示溢出隐藏，溢出盒子边框的内容将会被隐藏
• 但是padding部分的溢出还在

BFC其他作用

• 取消margin塌陷

清除浮动

• 让内部有浮动的父盒子形成BFC
• 给后面的父盒子设置，clear：both（清除其他的影响）
• 使用::after为元素给盒子添加最后一个子元素，并给::after设置clear:both
  （注意，需要是块级元素，并且一定要有内容“空格”）
• 在两个div中放一个div

定位

相对定位

position：relative

• 
• 当在p标签中加上
• 
• 这里的top表示向下移动100px，left表示向右移动100px
  

位置描述

• top，left，right，bottom
• 他的值可以是负数，表示向指定方向移动

相对定位的性质

• 他相当于是在原来的位置留坑，移动后相当于一个影子

相对定位的用途

• 用于元素的微调
• 当作绝对定位的参考盒子

绝对定位

position：absolute

• 盒子可以在浏览器中一以坐标进行位置精准描述

位置描述

• top，left，right，bottom
• 他是脱离标准文档流，会对其他内容进行压盖
• 脱离标准文档流：绝对定位，固定定位，浮动

绝对定位参考盒子

• 绝对定位不是永远以浏览器作为基准点的
• 绝对定位可以以，自己祖先元素中，离自己最近的拥有定位属性的盒子作为基准点，这个盒子通常时相对定位，所以这个性质也叫做“子绝父相”

绝对定位的盒子垂直居中

• 
• 
  左右居中也一样，因为它脱离了标准文档流所以不能直接用margin

z-index

• z-index属性是一个没有单位的正整数，数值大的压数值小的

绝对定位的用途

• 可以用来制作压盖，遮罩效果
• 可以介个css精灵来使用
• 可以结合js实现动画效果

固定定位

• 固定定位只能以网页作为参考点
• 脱离标准文档流

位置描述

• top，left，right，bottom

固定定位用途

• 返回顶部，楼层导航