文档流：
普通流（normal flow）：
字面意思是普通流或者标准流，也就是常说的文档流，指网页内标签正常是从上到下，从左到右排列的意思，css的定位机制有3种：普通流（标准流）、浮动、定位。
浮动：
是指使元素飘起来不完全脱离标准流的控制，绝对定位才是完全脱离标准流的，飘起来后不会再占原来的位置，浮动可以使块级元素在一行排列显示，float的值有：none默认值，元素不浮动、right元素向右浮动、left元素向左浮动。
.box ul li {
float:left;
}
浮动特性：
1、浮动只存在于水平方向，浮动不能上对齐和下对齐，浮动属于内容content，所以是无法跨越padding和border的，要想跨越就会使用定位；
2、浮动找离自己最近的父级盒子对齐，浮动影响的是他的下面的盒子，自己浮动后会脱离文档流不占位，从而下面的盒子会到它原来的位置排列；
3、浮动可以让元素默认转换为类似行内块元素（float使元素显示模式隐藏转换，但是并非真实行内块，因为行内块元素中间默认有间隙，而float转换后的元素中间没有间隙）。
清除浮动：
主要是为了解决父级元素没有给高度，子级盒子浮动不占位引起的父级盒子高度为0的问题，清除浮动后，父级盒子自动检测高度，从而不会影响下面标准流盒子的布局。
清除浮动的方法有四种：
1、额外标签法（标签给clear属性）：
在最后一个浮动元素末尾添加一个空标签，并给这个标签添加clear:both;属性，添加属性的三种方式任选其一都可以，这里采用行内样式举例子，clear的属性值有left、right、both（推荐使用），此方法比较快捷，但是给页面增加了无意义标签，结构化较差。
<style>
.father {
background-color: #ffaacf;
}
.son {
width: 100px;
height: 100px;
background-color: #666666;
float: left;
}
.son2 {
width: 200px;
height: 200px;
background-color: #9bdf13;
float:left;
}
.brother {
height: 100px;
background-color: #333333;
}
/*采用内联样式添加clear属性法
.clear {
clear: both;
}
*/
</style>
<body>
<div class="father">
<div class="son"></div>
<div class="son2"></div>
<div style="clear:both" class="clear"></div><!-- 添加空标签实现清除浮动属性法 -->
</div>
<div class="brother"></div>
</body>
2、父级标签添加overflow属性法：
给父级元素添加overflow属性同样可以实现清除浮动的效果，代码简洁，但是当页面的内容增多时，overflow属性不能使内容自动换行而隐藏，不能显示溢出的内容，overflow的值：hidden（溢出隐藏）、scroll（滚动条）页面会出现滚动条，不推荐使用、auto（自动）都可以清除浮动。
<style>
.father {
background-color: #ffaacf;
overflow: hidden;/*给父级标签添加overflow属性实现清除浮动*/
}
.son {
width: 100px;
height: 100px;
background-color: #666666;
float: left;
}
.son2 {
width: 200px;
height: 200px;
background-color: #9bdf13;
float:left;
}
.brother {
height: 100px;
background-color: #333333;
}
</style>
<body>
<div class="father">
<div class="son"></div>
<div class="son2"></div>
</div>
<div class="brother"></div>
</body>
3、after伪元素兼zoom: 1;属性法：
after伪元素可以解决额外标签法中无意义的标签问题，伪元素实际还是本身，只是给了另一个身份，其具体方法是：先声明伪类并配置属性：{content: “”;display: block;height: 0;clear: both;visibility: hidden;}，后父级盒子调用；zoom: 1属性是解决兼容IE6~7问题的，属性前面加*的作用是告诉浏览器，只有遇到IE6~7浏览器才会执行此代码，其他浏览器不执行此代码，如
<style>
/* 给父级盒子声明伪类，类名可以直接使用father，如：.father:after {} */
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* 解决IE6~7之间存在的兼容问题,此属性可以直接写在.father {}中，省去一个类名的声明 */
*zoom: 1;/* css hack 解决IE低版本浏览器兼容性*/
}
.father {
background-color: #ffaacf;
}
.son {
width: 100px;
height: 100px;
background-color: #666666;
float: left;
}
.son2 {
width: 200px;
height: 200px;
background-color: #9bdf13;
float:left;
}
.brother {
height: 100px;
background-color: #333333;
}
</style>
<body>
<div class="father clearfix"><!-- 父级标签调用伪类 -->
<div class="son"></div>
<div class="son2"></div>
</div>
<div class="brother"></div>
</body>
4、双伪元素法：
此方法和after伪元素法一样，只是采用双伪元素实现清除浮动效果，如：
<style>
/* 声明双伪类： */
.clearfix:before,
.clearfix:after {
content: "";
display: block;
height: 0;
}
.clearfix:after {
clear: both;
}
.clearfix { /* 解决IE6~7之间存在的兼容问题 */
*zoom: 1;
}
.father {
background-color: #ffaacf;
}
.son {
width: 100px;
height: 100px;
background-color: #666666;
float: left;
}
.son2 {
width: 200px;
height: 200px;
background-color: #9bdf13;
float:left;
}
.brother {
height: 100px;
background-color: #333333;
}
</style>
<body>
<div class="father clearfix"><!-- 父级标签调用伪类 -->
<div class="son"></div>
<div class="son2"></div>
</div>
<div class="brother"></div>
</body>
定位（position）：
实际开发中，标准流和浮动不能满足我们布局的需求，此时使用定位就可以很好的实现布局效果。定位属性主要包括：定位模式和边偏移。
定位模式：
position的属性值：
绝对定位和固定定位会发生模式转换，最终会默认转换为inline-block行内块模式
边偏移属性：
子绝父相搭配定位方式：
子绝父相是实际开发中一种常见的定位搭配方式，子级用绝对定位，父级用相对定位。父级用相对定位的原因是自己占位，不会影响下面元素的布局，子级用绝对定位的原因是自己不占位，方便其他元素布局，如常见轮播图布局。
/* 子绝父相定位代码展示： */
<style>
/* 实现btnleft 和 btnright位于topbox的两边居间，bottom盒子在top盒子上面： */
* {
margin: 0;
padding: 0;
}
body {
width: 600px;
height: 500px;
margin: 0 auto;
}
div {
border: 1px solid yellowgreen;
}
.topbox,
.bottom {
width: 400px;
height: 200px;
background-color: #443366;
position: relative;
}
.btnright~div {
width: 98px;
height: 160px;
background-color: #666666;
margin-top: 15px;
float:left;
}
.bottom {
background-color: #998866;
}
.btnleft,
.btnleft+div {
width: 50px;
height: 50px;
background-color: turquoise;
position: absolute;
top: 70px;
}
.btnleft+div {
right: 0px;
}
</style>
<body>
<div class="topbox">
<div class="btnleft"></div>
<div class="btnright"></div>
<div>页面一</div>
<div>页面二</div>
<div>页面三</div>
<div>页面四</div>
</div>
<div class="bottom"></div>
</body>
绝对定位的盒子水平、垂直居中算法：
普通盒子左右居中仅需margin：0 auto;即可，但是当给盒子给了定位或者浮动后，此方法失效，这时就只能使用算法两步进行居中定位：1:使用绝对定位给自己盒子left值为父级盒子宽度的50%（left：50%）2:使用margin-left值为自己盒子宽度的一半的负值，案例代码如下：
<style>
.box {
border: 1px solid #552;
width: 400px;
height: 300px;
position: relative;
}
.son {
border: 1px solid red;
width: 120px;
height: 100px;
margin: 0 auto;
/* float: left; */
position: absolute;
left: 50%;
margin-left: -60px;
top: 50%;
margin-top: -50px;
}
</style>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
z-index层级：
浮动会使后面的元素默认排在最下面，而定位会使后面的元素默认排在最上面，有的时候需要改变这个顺序，此时定位的元素可以使用z-index来解决这个问题（定位的元素才有z-index），其默认值为0，其值没有限制。
提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者 删除。
笔者：苦海
