position的五个属性值：
static、absolute、relative、fixed、inherit
各自特点：
static： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
absolute：脱离文档流，相对于（除了static以外的）最近的已定位父元素进行定位，其他盒子与其他盒子内的文本都会无视它
relative ：没有脱离正常的文档流，被设置元素相对于其原始位置而进行定位，其原始占位信息仍存在
fixed：脱离文档流，生成绝对定位的元素，相对于浏览器窗口进行定位。
inherit：规定应该从父元素继承 position 属性的值
z-index的3个属性值：
auto、number、inherit
各自特点：
z-index：Z-index属性决定了一个HTML元素的层叠级别。元素层叠级别是相对于元素在Z轴上（与X轴Y轴相对照）的位置而言。一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部。这个层叠顺序沿着垂直的线轴被呈现。
auto：默认。堆叠顺序与父元素相等。
number：设置元素的堆叠顺序。
inherit： 规定应该从父元素继承 z-index 属性的值。
float的4个属性值：
left、right、none、inherit
各自特点：
float：指定一个盒子（元素）是否可以浮动，元素向哪边浮动，会脱离文档流，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
left/right：向左/右浮动
none：默认值。元素不浮动，并会显示在其在文本中出现的位置
inherit：只有写了float：inherit 才会继承父元素的float属性
clear：clear 属性规定元素的（文档流中）哪一侧不允许其他浮动元素。
清除浮动的方法
未清除浮动会导致如下图的影响：
Paste_Image.png
方法一：使用带clear属性的空元素
.clear {clear: both;}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>
优点：简单，代码少，浏览器兼容性好。
缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。
方法二：使用CSS的overflow属性
给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。
在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
.news {
background-color: gray;
border: solid 1px black;
overflow: hidden;
*zoom: 1;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
方法三：给浮动的元素的容器添加浮动
给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。
方法四：使用邻接元素处理
什么都不做，给浮动元素后面的元素添加clear属性。
.content{clear:both;}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="content"></div>
</div>
方法五：使用CSS的:after伪元素
结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。
给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。
.clearfix:after{ content: "020"; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { /* 触发 hasLayout */ zoom: 1; }
<div class="news clearfix">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格"020"或点"."，并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。
推荐
在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式；在小模块如ul里使用overflow:hidden;
补充：
- 正常文档流：就是我们没有用css样式去控制的html文档结构，dom结构是没有发生变化的
- 脱离文档流：float、absolute、fixed
- 不管是float还是position，使用它们都可以将行内元素转换为隐式的块级元素，不过随之带来的坏处就是会影响兄弟元素
- z-index只能工作在被明确定义了absolute，fixed或relative 这三个定位属性的元素中。
网友评论