CSS布局机制

CSS布局的三种机制

• 普通流（标准流）：块元素独占一行，从上向下顺序排列，常用元素div、hr、p、h1-h6、ul、ol、dl、form、table；行内元素会按照从左到右顺序排列，碰到父元素边缘则自动换行。常用元素span、a、i、em等。
• 浮动：让盒子从普通流中浮起来，主要作用是让多个块级盒子一行显示。
• 定位：将盒子定在浏览器的某一个位置。

浮动

作用：脱离标准流，可以让多个盒子（div）排列成一行，可以实现盒子的左右对齐等，最早是用来实现文字环绕图片的效果。float：none|left|right

清除浮动

父级没高度，子盒子浮动，影响下面的布局了就需要清除浮动。

作用：为了解决父级元素因为子级浮动引起内部高度为0的问题。清除浮动之后父亲会根据浮动的子盒子自动检测高度。父元素有了高度，就不会影响下面的标准流了。clear: left|right|both

使用：

1. 通过在浮动元素末尾加一个空标签，设置属性clear: both; 简单，但添加了无意义标签。
2. 为父级元素添加overflow: hidden|auto|scroll。代码简洁，但内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要被溢出的元素。
3. 使用after伪元素清除浮动。符合闭合浮动思想，结构语义化正确，但ie6、7不支持，使用zoom：1触发。（本质是用css在浮动元素后面生成了一个空标签）
4. 使用双伪元素清除浮动:after :before

/* 声明清除浮动的样式*/
.clearfix:after {
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

.clearfix {
    /*ie6 、7专门清除浮动的样式*/
    *zoom: 1;
}

/* 声明清除浮动的样式*/
.clearfix:before，.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    /*ie6 、7专门清除浮动的样式*/
    *zoom: 1;
}

定位 

将盒子定在某一个位置，自由浮动在其他盒子上方。定位由模式+偏移决定。

定位模式：

• static静态定位：标准流，相当于清除定位，不受偏移属性的影响，平时基本不用；
• relative相对定位：标准流，相对该元素原来的位置进行偏移，原位置还保留；
• fixed固定定位：脱标，相对于浏览器可视化窗口决定偏移，即使滚动页面，它也始终位于同一位置；
• absolute绝对定位：脱标，相对有定位的祖先元素进行偏移，如果祖先元素未定位，则以浏览器文档为基准进行偏移；
• sticky粘性定位：元素根据用户的滚动位置进行定位。根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 。

拓展

堆叠顺序：z-index 属性设置元素的堆叠顺序。 z-index 可为负值，值越高离用户越近。该属性仅能在定位元素上奏效，其他标准流、浮动、静态定位无效。