小白也能看懂的css基础（二）

接上文-----css基础（一）

3.6 浮动 float

3.6.1 浮动作用

 让（块级）元素并排，并且可以设置宽高，用于布局

3.6.2 特点

 相互贴靠  |  可以设置宽高  |  完全脱标
 注意： 用浮动就不要用display。浮动对后续的元素有影响，对前面的元素无影响。

3.6.3 清除浮动

  1. 给浮动元素的父亲设置高度，占位，不灵活，实际应用中，让儿子高度撑开父盒子，但儿子高度不确定，所以父亲高度也不能确定
  2. clear 在要清除浮动的儿子后面（在父亲末尾）再加一个空盒子，对之设置 clear：both；缺点：多了html结构。
  3. 给父亲加overflow: hidden
  4. ::after {content: '内容一般为空，在元素后添加' ；display：block} 默认为行内元素， 是第二种方法的升级版
     ::before { }
  5. 最优方法，可以反复使用  用类清楚浮动，在结构内写class=”.clearfix“
    .clearfix : after { content: ''; display: block; clear: both;}
     after伪元素ie7以下不兼容，  .clearfix { *zoom：1；}   

3.6.4 overflow问题

   overflow: hidden(让溢出的内容隐藏) |visible(默认可见) |(始终显示滚动条和滚动条区域）| auto（内容溢出显示滚动条，不溢出不显示）

  overflow: hidden 会触发BFC
  搜索引擎优化，文字图片同时存在，但设置文字行高很高，超出的部分（文字）隐藏overflow: hidden；如豆瓣LOGO

补充：BFC

什么是BFC？
BFC： block  formatting context 块级格式化上下文，指的是页面一个渲染区域，拥有  自己一套渲染规则，它决定了其子标签如何进行定位以及与其他标签相互关系和作用
BFC是一个独立区域的块级渲染区域，只有块级盒子参与，它规定了内部的block-level box 如何布局，并且这个区域与外部毫不相干

如何生成BFC？
根元素body | float 只要其值不为none | overflow只要其值不为visible | display 值为inline-block | position为absolute或fixed

BFC特点？
内部标签会在垂直方向一个接一个放置。垂直方向的距离由margin决定，属于同一个BFC的两个相邻标签会发生重叠。每个标签的左外边距与包含块的左边界相接触，从左到右，浮动也如此。BFC的高度，浮动的子元素参与计算。BFC是一个隔离的独立容器，容器里的子元素不会影响外面标签

BFC应用： 
避免margin值叠加问题 | 清除浮动 | 避免文字环绕（浮动的div被文字环绕，给文字加触发BFC，文字不环绕）| 实现两列、三列布局

3.6.5 垂直居中

   vertical-align: top（顶线对齐） | bottom（底线对齐） | baseline（基线对齐）| middle（中线对齐）
   一般用在调整文字与图片垂直方向的对齐方式，行内元素或行内块间才有效

3.7 定位 position

  position：static（默认静态定位） | ralative （相对定位） | absolute （绝对定位） | fixed（固定定位）
  目的：移动位置

3.7.1 relative 相对定位

  相对定位的元素不脱标，原来的位置保留；
  相对于自己原来的位置进行定位   left-top /right-bottom（据原来的位置） 提升层级，压在其他标准流的上面
  作用：对自己进行位置的微调   |  配合绝对定位使用。

3.7.2 absolute 绝对定位

 绝对定位的元素脱标，原来的位置不保留
 如果该绝对定位元素没有定位的祖先元素，则以body左上角为参考点，假如有定位的祖先，则以最近的祖先元素为参考点
 特性: (1)脱标; (2)不分行内元素块元素，假如不设置宽度，盒子由内容撑开; (3)子绝父相，父亲不脱标，结构比较稳定，此时儿子可在父亲范围内任意定位。

3.7.3 fixed 固定定位

 固定定位的元素始终以浏览器窗口左上角为参考点。

3.7.4 z-index

 z-index: 数字；
 确定盒子的层级，值越大层级越高，位置越向上。