css04

定位

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

position属性常用值

absolute	
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed	
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative	
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

定位标签的层级 z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

可能的值

auto	默认。堆叠顺序与父元素相等。
number	设置元素的堆叠顺序。
inherit	规定应该从父元素继承 z-index 属性的值。

脱离文档流属性总结

float: left;	
float: right;
position: absolute;
position: fixed

需要注意的是，使用float脱离文档流时，其他盒子会无视这个标签，但其他盒子内的文本、图片、表单标签依然会为这个标签让出位置，环绕在周围。（脱离文档流，不脱离文本流）

而对于使用position脱离，其他盒子完全无视，包括标签内部的文本、图片、表单标签（即脱离文档流，也脱离文本流）

BFC（块级格式上下文）

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

为了便于理解，我们换一种方式来重新定义BFC。一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：

1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

BFC特性

·内部的标签会在垂直方向上一个接一个的放置
·每个标签的左外边距由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠
·每个标签的左外边距与包含块的左边距相接触（从左到右），即使浮动标签也是如此。
·计算BFC的高度时，浮动子标签也参与计算
·BFC就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面的标签，反之亦然。

BFC解决的问题
外边距折叠
特性第2条：垂直方向上的距离由margin决定
BFC是一个独立容器，可以让其中一个标签处于一个BFC中

自适应两栏或三栏布局
左边固定宽度，右边不设宽，因此右边的宽度自适应
左右两边固定宽度，中间不设宽，因此中间的宽度自适应
BFC的区域不会与float的标签区域重叠，所以我们只需要创建一个BFC，他就会自动缩小，以不被浮动的标签遮盖，就能够实现右侧栏自适应

防止字体环绕
众所众知，浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被覆盖的，文字反而还会环绕浮动的盒子。

清除浮动
利用overflow: hidden; 因为浮动的盒子无法撑出处于标准文档流的父盒子的height