脱离文档流问题

普通流（normal flow）

也被叫做文档流/标准流

CSS的定位机制有3种：普通流（标准流）、浮动和定位。

浮动（float）：此时浮动元素将脱离文档流，不占位置，会影响原来的文档流

最常见的用法：浮动的目的：就是为了让多个块级元素同一行上显示。

注意：当使用过浮动后，父元素因为子元素浮动而引起的内部高度为0，要清除浮动

.clearfix:before,.clearfix:after{
display: block;
content: ‘’;
clear: both;
visibility: hidden;
}
           

浮动特性：

浮动的元素总是找离它最近的父级元素对齐。但是不会超出内边距的范围

定位：

静态定位（static）：

网页中所有元素都默认的是静态定位，文档流的特性就是静态定位。

相对定位（relative）：

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。

对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。如下图所示，即是一个相对定位的效果展示：

注意：

1. 相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。（所以可以用top、right、等来相对于原来位置进行移位）
2. 其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）

就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。（相对定位不脱标）

如果说浮动的主要目的是 让多个块级元素一行显示，那么定位的主要价值就是 移动位置， 让盒子到我们想要的位置上去。

绝对定位absolute ：

如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。

当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。

绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。

父级没有定位

若所有父元素都没有定位，以浏览器为准对齐(document文档)。

父级有定位

绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

绝对定位的盒子水平/垂直居中

普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了

定位的盒子也可以水平或者垂直居中，有一个算法。

1. 首先left 50% 父盒子的一半大小
2. 然后走自己外边距负的一半值就可以了 margin-left。

固定定位(fixed)

常用：广告定位

//居中广告
div{
    position:fixed;
    left:50%;
    top:50%;
    width:100px;
    height:100px;
    background-color: red;
    margin-left:-50px;
    margin-top:-50px;
    }
           

固定定位是绝对定位的一种特殊形式，类似于 正方形是一个特殊的 矩形。它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

固定定位有两点：

1. 固定定位的元素跟父亲没有任何关系，只认浏览器。
2. 固定定位**完全脱标，不占有位置，**不随着滚动条滚动。