浮动、定位、display属性

浮动
float是css样式中的定位属性，用于设置标签的居左浮动和居右浮动，浮动后的元素不属于HTML文档流，
需要用清除浮动把文档拽回文档流中。（float值：  left 向左浮动；right 向右浮动）


网页中大部分对象默认是占用文档流，不过有四种情况使得元素离开文档流：浮动float、绝对定位absolute、相对浏览器定位fixed、元素不显示display：none；这四种情况不占文档流的空间。


清除浮动方法：  写一个空的div,然后给div添加clear：both属性
加浮动的目的是让两个元素可并排显示，如果清除浮动，只是让块元素脱离文档流的特性消失，而并排显示的特性还在。
如：
.d1{width: 200px;height: 200px;background: red;float: left;}
.d2{width: 200px;height: 200px;background:yellow;float: left;}
.d3{width: 300px;height: 300px;background: green;}
.clear{width: 0px;height: 0px;clear: both;}


<div class="d1">第一</div>
<div class="d2">第二</div>
<div class="clear"></div>
<div class="d3">第三</div>


定位
通过position这个属性来定义，position属性是指本体相对于上级的定位，position定位又分绝对定位和相对定位。它的默认值是static，意味着元素没有被定位，出现在文档流中应该出现的位置。
如果用position来布局页面，父级元素的position属性必须为relative或absolute。行元素加了position：absolute后可设置宽和高（加了float和fixed以后也可以设宽和高）


常见属性值：正常的文档流static relative；脱离文档流absolute fixed。
static 无特殊定位，对象遵循正常的文档流
relative 对象遵循正常文档流
absolute 对象脱离正常文档流，使用top，right，left，bottom等属性进行绝对定位。如果不指定父级定位容器，将以浏览器窗口进行定位。
fixed 对象脱离正常文档流，使用top，right，left，bottom等属性以浏览器窗口为参考点进行定位，当出现滚动条是， 对象不会随之滚动。


z-index 可以改变元素的叠放顺序，只有用了脱离文档流（absolute、fixed）时使用其他情况不起作用。
如：
 div{width: 200px;height: 200px;}
.d1{background: red; position: absolute;z-index: 1999;}
.d2{background:green;z-index: 900;position: absolute;}


<div class="d1">第一</div>
<div class="d2">第二</div>


display属性
css规定，每个网页元素都有一个display属性，用户确定该元素的类型。默认display属性值为“block”，称为块元素，而span的默认display属性值为“inline”，称为行内元素。
display常见属性值
none 隐藏对象
inline：内联元素
block 块元素
inline-block 内联块元素
table-cell 表格单元格（通常配合vertical-align：middle；text-align:center;使大小不一样的图片（或其他元素）可以居中显示）