浮动

基本概念

最本质功能：

用来实现并排

 float: left;

使用要点：

要想浮动，并排的盒子都要设置浮动；且父盒子要有足够的宽度，否则子盒子会掉下去

顺序贴靠特性

子盒子会按照顺序进行贴靠，如果没有足够空间，则会寻找再前一个兄弟元素

一定可以设置宽高

浮动的元素不再区分块级元素、行内元素，已经脱离了标准的文档流，一律能够设置宽度和高度，即使它是span或者a标签

右浮动

float: right;

实现网页布局

垂直显示的盒子不要设置浮动；只有并排显示的盒子才要设置浮动

BFC规范

BFC：块级格式化上下文

页面上的一个隔离的独立容器，容器里面是子元素不会影响到外面的元素，反之亦然

一个盒子不设置height，当内容子元素都浮动，无法撑起自身

BFC可以取消盒子margin塌陷；可以阻止元素被浮动元素覆盖 

如何创建BFC

1. 浮动：float的值不是none

2. 定位：position的值不是static或者relative

3. display属性：设置为inline-block、flex、或者inline-flex

4. overflow：hidden；

什么是overflow：hidden；

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

清除浮动

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

方法

1. overflow：hidden；原理：让内部有浮动的父盒子形成BFC，它就能关闭住内部的浮动。
2. clear：both；原理：clear表示清除浮动对自己的影响，both表示左右浮动都清除；但是margin会失效
3. ::after伪元素；给盒子添加最后一个子元素，并且给::after设置clear：both；

   .clearfix::after{content: '';clear: both;display: block;
   }

4. 在两个父盒子之间，隔一个携带clear：both；的盒子

定位

相对定位

盒子可以相对自己原来的位置进行位置调整，但只是进行渲染，实际位置依旧在原来的位置

position: relative;
top: 100px;
left: 100px;/* right: 300px;bottom: 200px; */

作用

1. 用来微调元素位置
2. 可以当作绝对定位的参考盒子

绝对定位

盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置

绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对他们进行压盖

子绝父相

绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当作基准点；这个基准点通常是相对定位的，所以这个性质也被叫做“子绝父相”

垂直居中

position: absolute;
top: 50%;
margin-top: -自己高度的一般;

用途

用来制作”压盖“、"遮罩"效果

可以结合CSS精灵使用

可以结合JS实现动画

堆叠顺序z-index属性

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

固定定位

position：fixed；

以浏览器页面为参考，无论页面如何卷动，永远固定在页面上；脱离标准文档流

用途：eg: 返回顶部、楼层导航