CSS浮动和各种定位
CSS定位
css定位机制
文档流：元素按照在HTML中的位置决定排布的过程
块级元素是从上到下的，内联元素是从左到右的
浮动
position布局
position
css position属性用于指定一个元素在文档中的定位方式。top，right，bottom，left属性则决定了该元素的最终位置。
| 属性值 | 描述 |
|---|---|
| static | 默认。静态定位， 指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index属性无效。 |
| relative | 相对定位。 元素先放置在未添加定位时的位置，在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白） |
| absolute | 绝对定位。不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并 |
| fixed | 固定定位。 不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变 |
relative
1.不脱离文档流
参考点
以原来的位置作为参考点，可以进行top,left,right,bottom进行位移
注意
由于相对的位置是原来的位置，坐标轴为第4象限，y轴是相反的
absolute
1.脱离文档流
2.层级提高
参考点
父标签的位置
static：
无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。
相对于最近的非static祖先元素定位，如果没有非static祖先元素，那么以页面左上角进行定位子绝父相
fixed
1.脱离文档流
参考点
html左上角为参考点
z-index
- z-index只应用在定位的元素，默认z-index:auto;
- z-index取值为整数，数值越大，它的层级越高
- 如果元素设置了定位，没有设置z-index，那么谁写在最后面的，表示谁的层级越高。
- 从父现象。通常布局方案我们采用
子绝父相，比较的是父元素的z-index值，哪个父元素的z-index值越大，表示子元素的层级越高。
float浮动属性
加浮动的元素，会脱离文档流，会在父容器中靠左或者靠右显示，如果之前有浮动元素，就会挨着浮动的元素排列，如果父容器空间不足，他会自行调整浮动：css样式表中用float来表示
| 属性值 | 描述 |
|---|---|
| none | 表示不浮动，所有之前讲解的HTML标签默认不浮动 |
| left | 左浮动 |
| right | 右浮动 |
| inherit | 继承父元素的浮动属性 |
float注意点
1.只会影响后面的元素
2.内容默认提升半层，为1.5层，文档流的层为1，但是文字的层级为1.5，所以会出现文字环绕的现象
3.浮动元素的宽度是内容决定的
4.换行排列，父容器一行装不下了，会到下一行（这其中有很多不同的规则，注意下）
5.主要是给块级元素添加的，但是也可以给内联元素添加
常见作用
浮动实现布局
文字环绕
父盒子高度塌陷
父盒子的高度不能由浮动元素撑起来
清除浮动的方式
上下排序（上级元素浮动，对后面无影响）
clear属性：表示清除浮动，left、right、both
嵌套排列（子浮动元素，如何把父元素撑起来）
固定宽高：不推荐，把高度固定死，不适合做自适应的效果
父元素浮动：不推荐，因为父容器也会影响到后面的元素
overflow：hidden（BFC规范），如果子元素想溢出，那么会受到影响
display：inline-block（BFC规范），不推荐，父容器会影响到后面的元素。
设置空标签：不推荐，会多添加一个标签
after伪类：推荐，相当于空标签的加强版，大公司的做法（after默认添加的是一个内联，所有要把它转为块级，快级有clear属性）
伪元素清除法
#a:after{
content: "";
display: block;
clear: both;
}
overflow:hidden
| 属性值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外 |
| hidden | 内容会被修剪，并且其余内容不可见 |
| scroll | 内容会被修剪，浏览器会显示滚动条以便查看其余内容 |
| auto | 由浏览器定夺，如果内容被修剪，就会显示滚动条 |
| inherit | 规定从父元素继承overflow属性的值 |
Block Formtting Context
BFC区域一条规则:计算BFC（块级盒子）的高度时，浮动元素也参与计算
BFC布局规则
1.内部的Box会在垂直方向，一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。4.BFC的区域不会与float 元素重叠。
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6.计算BFC的高度时，浮动元素也参与计算
BFC产生条件
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
布局
行内元素水平居中
1
text-align:center
line-height:盒子高度
2
display:table-cell 转为单元格
vertical-align:middle
块级元素水平居中
1
position:absolute
margin:auto
left:0
right:0
top:0
bottom:0
2
父
display:table-cell
vertical-align:middle
text-align:center
子
display:inline-block
3
position:absolution
top:50%
left:50%
margin-left:-50px
margin-top:-50px
