css中的float和position两个属性
1.盒子的浮动
标准流中块级元素在水平方向上会自动伸展，直到包含它的元素的边界；而在竖直方向和兄弟元素一次排列，不能并排，使用浮动方式后，块级元素可以并排。
float默认的属性为none 即标准流。float属性的值设置为left和right元素就会向其父元素的左侧和右侧靠紧。同时盒子的宽度不再伸展，而是根据盒子里面的内容的宽度来确定。
实例：<body>
<div class="father">
<div class="son1">box-1</div>
<div class="son2">box-2</div>
<div class="son3">box-3</div>
<p>浮动框外围的文字</p>
</div>
</body>
（1）.
.son1{ float:left; } 标准流中的box-2的文字在围绕着box-1排列，而此时box-1的宽度不再伸展，而是容纳下内容的最小宽度 此时box-2与box-1的左边框重合 因为 b1已经脱离了标准流。
（2）.设置b2的浮动 son2{float：left}
. 
b3的左边框仍在b1的左边框下面 b1和b2之间的空白不会是深色，这个深色实际上是b3的背景色。b1和b2之间的 空白是由二者的margin构成的
（3）.设置b3的浮动div 左浮动
（4）.改变浮动的方向 box-3{float:right} box-3移动到了最右端
（5）.b-3改为左浮动 b-2改为右浮动
（6）.全部向左浮动
在b-1中增加一行 ，使它的高度不原来高一些 并将浏览器窗口变窄
clear属性除了可以设置为了left或right之外，还可以设置为both表示同时清除左右两边的影响。
对clear属性的设置要放到文字所在的盒子中，而不要放到对浮动盒子的设置里。
（8）扩展盒子的高度
一个div的范围是由它里面的标准流内容决定的。与里面的浮动内容无关。
在三个div后加入一个标准流div并设置样式 并覆盖原来对margin padding 和border的设置 并设置clear：both
2.盒子的定位
position属性的设置
（1）static 默认的属性值 该盒子按照标准流 （包括浮动方式）进行布局
（2）relative相对定位 仍在标准流中 后面的盒子仍以标准流方式对待它 使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移制定的距离。
（3）absolute 绝对定位 盒子的位置以它的包含框为基准进行偏移，绝对定位的盒子从标准流中脱离，这意味着他们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。
（4）fixed 固定定位 与绝对定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变。
静态定位 static 默认 不设置position就是static
相对定位 relative 设置position 并设置一定的偏移量
（1）一个子块
position：relative;
left:30px;
top:30px;
使用相对定位的盒子，会相对于它原本的位置（标准流），通过偏移指定的距离，到达新的位置。使用相对定位的盒子任然在标准流中，它对父块和兄弟盒子没有任何影响。 对浮动的盒子使用相对定位同样适用以上两个标准
绝对定位 absolute
通过position属性设置偏移距离，核心问题是以什么作为偏移的标准，
相对定位是以盒子本身在标准六中或者浮动时原本的位置作为偏移基准的。
绝对定位前标准流的图片
css设置 #block2{
postition：absolute；
top：0；
right：0；
} 如图4.24 以浏览器窗口作为定位基准的。且 该div脱离标准流 好像没有box-2一样。
改变设置 #block2{
position：absolute；
top：30px；
right：30px；
}
以浏览器 窗口为基准 ，从右上角开始向下和向左各移动30px
并非所有绝对定位都是以浏览器窗口为基准。使用绝对定位的盒子以它的“最近”的一个“已经定位（已经设置position）”的“祖先元素”为基准进行偏移，如果 没有已经定位的祖先元素即没有position设置，那么会以浏览器窗口为基准进行定位。绝对定位的框从标准流中脱离，这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒 子不存在一样。 其中 已经定位的意思是position被设置为不是static的任意一种方式。
将绝对定位的基准称为“包含块”
绝对定位的特殊性质
如果设置了绝对定位，而没有设置偏移属性，那么它仍将保持在原来的位置，这个性质可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置的情况。
fixed 固定定位
只以浏览器窗口为基准
z-index空间位置 用于调整定位时重叠块的上下位置，z-index的值大的页面位于其值小的上方。
盒子的display属性
display： inline block none
改变元素的类型 或者隐藏元素
<span style="display:bolck">box</span> 将span标签从行内元素变为块级元素
浮动和定位