position 定位法，float浮动法

来源：互联网发布：网络头像男生编辑：程序博客网时间：2024/05/17 08:14

css的position定位方法，是用来控制元素的定位模式，是相对定位还是绝对定位

position：releative 相对定位（是指相对于在文档流中该元素原始所处的位置，进行x和y轴的移动，而且该元素移动后，它原来在文档流中所占的位置不会被清除！）
position：absolute 绝对定位（具有绝对定位属性的元素将脱离文档流，并参考与其最近的具有定位属性（position属性）的父级元素进行定位。（不保留其原来在文档流中所占用的位置））；absolute 绝对定位的使用条件: 1: 必须给父元素也拥有定位属性，（一般使用relative（相对）定位属性) 2：给子元素加绝对定位属性（position：absolute）同时要加方向属性（left,right,top,bottom）

css的float属性,是用来控制元素的浮动的
     float：left 左浮动
     float：right 右浮动
     float：none 清除浮动，一般用于清除整体浮动元素中的某个元素的浮动属性:

1：对象浮动后，他就脱离了当前的文档流，他原来所占用的地方就腾空出来了，而其后续的元素将会占用这个腾空出来的空间位置，实际上浮动在深沉理解和Z轴有关系，如果想让多个块显示在同一行中，我们可以把这些元素都设成浮动，并且浮动的方向都一样！

2：浮动口诀：浮动浮动，先浮后动，（浮动的对象会先漂浮起来，离开原来的位置。后动，就是它后续的对象，会向该元素原来在文档流中的位置上，动起来！（也就是文档流的排列位置会从浮动出去的那个元素的位置重新再排列起来））

3：清除浮动：就是清除相对于自身元素之前的元素所设置了的浮动属性，从而消除之前元素因为设置了浮动属性造成的自身元素的排列变化。

4:浮动对父元素的影响【如何清除浮动】

当父元素没有指定高度时，而这时它的子元素有浮动属性，该父元素则不会自适应高度（典型的warp实例）。我们采用以下几种办法解决这个问题【清除浮动】：

1):W3C标准(额外标签法)：给父元素增加一个空的div，并设置这个div的clean属性为both

2):给父元素添加overflow属性并设置为hidden，但是如果子元素使用了定位布局，则会造成居多麻烦，溢出的部分会被隐藏掉

3):利用after伪对象（最流行的方式，该方法实际上就是第一种w3c标准的一种改进的写法）

.clearFix:after{

clear:both; //清除相关联的元素的浮动属性对自己造成的影响

display:block; //将他变成块级元素

visibility:hidden; //将该块隐藏

height:0px; //该块的高度为0，实际上已经设了隐藏，这个高度就可以不设

content:"."; //该块的内容为. 也可以为空，这个属性不能省略，因为这是after伪对象的必要属性（详见CSS手册）

}

.clearFix{zoom:1;} /*解决ie6/7的兼容问题*/

具体实例：

<div style=“width:200px;border:1px solid red;” class=“clearfix”>//引用先前定义好的after伪类，来清除浮动，达到高度自动扩张的功能

</div>

css 的display属性，是用来控制元素在行级元素和块级元素之间切换的一个属性（inline block ），当值是none的时候则是隐藏该元素，一般我们用来与JS一起配合操作
     取值范围：
     display：inline
     display：block

0 0