CSS中文档流之普通流，浮动及定位、浮动特性及清除浮动的方式、定位模式，子绝父相搭配定位方式、z-index层级

文档流：

普通流（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>