浮动和定位

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

1. float的值不为none；
2. overflow的值不为visible；
   =>overflow:scrroll 始终显示滚动
   =>overflow:auto 超出才显示滚动
   =>overflow:hidden 超出部分隐藏
3. display的值为 table-cell、table-caption和inline-block之一；
   => table-cell 此元素会作为一个表格单元格显示（类似 和 ）
   =>table-caption 此元素会作为一个表格标题显示（类似 ）
   =>inline-block 行内块元素。
4. position的值不为 static或 relative中的任何一个；
   => static 默认值。没有定位，元素出现在正常的流中
   => relative 生成相对定位的元素，相对于其正常位置进行定位。
   作用：
5. 包含浮动元素
6. 阻止margin向外传递
7. 不被浮动元素覆盖