文章目录
CSS的定位机制有3种：标准流、浮动和定位。
标准流
标准流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做标准流布局。
浮动 float
浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。
元素的浮动是指设置了浮动属性的元素会脱离标准标准流的控制，移动到其父元素中指定位置的过程。
浮动脱离标准流，脱标不占位置，会影响标准流。浮动只有左右浮动。
在CSS中，通过float属性来定义浮动。
语法：选择器{float:属性值;}
| 属性值 | 描述 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 元素不浮动（默认值） |
浮动的目的就是为了让多个块级元素同一行上显示。
清除浮动
清除浮动的本质
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。
准确地说，并不是清除浮动，而是清除浮动后造成的影响
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题（脱离标准流）。
清除浮动方法
其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。
在CSS中，clear属性用于清除浮动，其基本语法格式如下：
选择器{clear:属性值;}
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
额外标签法
是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style="clear:both"></div>，或则其他标签br等亦可。
优点： 通俗易懂，书写方便。
缺点： 添加许多无意义的标签，结构化较差。
父级添加overflow
可以通过触发BFC的方式，可以实现清除浮动效果。
可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。
优点： 代码简洁
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
使用伪元素清除浮动
使用伪元素:after方式为空元素的升级版，好处是不用单独加标签了*
使用方法：
.clearfix:after{
visibility:hidden;
clear:both;
display:block;
content:".";
height:0;
}
.clearfix{
*zoom:1;/* IE6、7 专有 */
｝
优点： 符合闭合浮动思想 结构语义化正确
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
定位 position
元素的定位属性主要包括定位模式和边偏移两部分。
1、边偏移
| 边偏移属性 | 描述 |
|---|---|
| top | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
也就说，以后定位要和这边偏移搭配使用了， 比如 top: 100px; left: 30px; 等等
2、定位模式(定位的分类)
在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：
选择器{position:属性值;}
position属性的常用值
| 值 | 描述 |
|---|---|
| static | 自动定位（默认定位方式） |
| relative | 相对定位，相对于其原文档流的位置进行定位 |
| absolute | 绝对定位，相对于其上一个已经定位的父元素进行定位 |
| fixed | 固定定位，相对于浏览器窗口进行定位 |
静态定位 static
静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。
静态定位的元素不会受到 top, bottom, left, right影响。
静态定位唯一的用处：就是取消定位position: static。
相对定位 relative
相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。
对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。如下图所示，即是一个相对定位的效果展示：
特点：
- 相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有，其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）。
- 相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。
绝对定位 absolute
特点：
- 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于
<html>。 absolute 定位使元素脱离标准流，因此不占据空间。
绝对定位的盒子水平/垂直居中
普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了
定位的盒子也可以水平或者垂直居中，有一个算法。
- 首先
left:50%父盒子的一半大小 - 然后
margin-left设置为全部宽度的一半。
固定定位 fixed
特点：
- 元素的位置相对于浏览器窗口是固定位置。
- 固定定位完全脱标，不占有位置，不随着滚动条滚动。
叠放次序
当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。
注意：
z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。- 如果取值相同，则根据书写顺序，后来居上。
- 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。
四种定位总结
| 定位模式 | 是否脱标占有位置 | 是否可以使用边偏移 | 移动位置基准 |
|---|---|---|---|
| 静态 static | 不脱标，正常模式 | 不可以 | 正常模式 |
| 相对定位 relative | 脱标，占有位置 | 可以 | 相对自身位置移动 |
| 绝对定位 absolute | 完全脱标，不占有位置 | 可以 | 相对于定位父级移动位置 |
| 固定定位 fixed | 完全脱标，不占有位置 | 可以 | 相对于浏览器移动位置 |