float浮动
- 脱离文档流
- 元素会按照我们指定的方向移动，碰到父级的边界或者前边的浮动元素停止
例：float:left;float:right; -
float:none;元素不浮动，并会显示在其在文本中出现的位置。 - 浮动元素折行
在一行显示,父级的宽度放不下了，会自己折行 - 支持宽高等样式，不设置宽度的时候，宽度由内容撑开
- 浮动元素的上下margin值不会被重叠
（margin：块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。)
注意：浮动的位置是碰到前面的浮动元素，换行时要注意浮动元素的margin和padding值也要计算，如下图，div1的margin值占了20个像素，因此换行时从div1后开始，并且要留出div3的margin值
position定位
一、 相对定位 relative
position: relative; top: 100px; left: 300px;
- 如果值设置相对定位，不设置偏移位置，则是在原位置
- 如果元素不设置定位，则只写位置的设置都无效
left
top
bottom
right -
如果没有设置层级，后面的同级会覆盖前面的同级
- 元素移动之后会保留原始位置（不脱离文档流）
- 根据元素的原始位置来计算坐标
二、absolute绝对定位
- 脱离文档流
注意：float定位也是脱离文档流，不同的是，float定位时，其他盒子会无视这个元素，但是其他盒子的文本会让出位置，环绕在周围；absolute定位时，其他盒子和盒子内的元素都会无视它。
absolute定位
float浮动 - 提升层级
- 没有定位父级时向上级找，所有父级都没有定位时设置位置以document来计算自己的坐标
- 绝对定位让内嵌支持宽高例：span。相当于display:inline-block;
- 不设置宽度，有内容撑开
- 触发BFC
层级：z-index：数值；数值越大层级越高，只能加给定位元素，在同级元素之间比较层级。
三、固定定位fixed
- 脱离文档流
- 提升层级
- 把元素固定在可视区的某个位置上（不随页面滚动而移动）
- 出发BFC
- 是内嵌元素支持宽高
- 不设置宽度的时候，宽度由内容撑开
四、static定位
默认，静态定位/无定位
清除浮动
脱离文档流导致的问题：
子元素脱离文档流，会导致父级的高度塌陷（没有高了）
- clear: left/right/both 让元素某个方向不能有浮动元素
注意：clear只对自己之前（html结构中前面的）的元素有作用 - after 伪类
-在元素的内容的最后添加东西
div:after{content:"内容";}
.clearFix:after {
content: "";
clear: both;
display: block; //添加之后内容是内联，要添加样式需要先变成块级元素
}
- 如果父级中所有子元素都浮动了，父级的高度是固定的那么可以直接为父级加高度；如果父级的高度是需要子级撑开的，那么需要为父级清除浮动（clear:both)
BFC
BFC：(block formatting context 块级格式化上下文),它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用
一个新的BFC可以通过给容器添加任何一个触发BFC的CSS样式，如
overflow: scroll,overflow: hidden,display: flex,float: left,或者display: table来创建。
display:table可能会产生一些问题overflow:scroll可能会显示不必要的滚动条float:left将会把元素置于容器的左边，其他元素环绕着它overflow:hidden将会剪切掉溢出的元素
触发BFC
- float的值不为none；
- overflow的值不为visible；
=>overflow:scrroll 始终显示滚动
=>overflow:auto 超出才显示滚动
=>overflow:hidden 超出部分隐藏 - display的值为 table-cell、table-caption和inline-block之一；
=> table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
=>table-caption 此元素会作为一个表格标题显示（类似 <caption>）
=>inline-block 行内块元素。 - position的值不为 static或 relative中的任何一个；
=> static 默认值。没有定位，元素出现在正常的流中
=> relative 生成相对定位的元素，相对于其正常位置进行定位。
作用： - 包含浮动元素
- 阻止margin向外传递
- 不被浮动元素覆盖
