浮动与定位知识总结

一 浮动

一 应用

多个块级元素纵向排列找标准流，横向排列找浮动

选择器{
float；属性
}

属性有以下几个

none  元素不浮动（默认值）

left    左浮动

right  右浮动

二 特点

1.多个块级元素纵向排列找标准流，横向排列找浮动

2.任何元素都可以浮动，浮动后与行内块元素属性相似

3.如果盒子没有添加宽度设置，则与父级一样宽，但添加浮动后，他的大小由内容决定

4.浮动间没有缝隙

5.一般情况下，一个盒子里存在多个元素，一个子级元素浮动，其他的兄弟元素衣蛾要浮动

三 清除浮动

一 用法

选择器{
clear:属性；
}

left    清除左侧浮动

right  清除右侧浮动

both  清除左右浮动

二 为什么清除浮动

1.父级元素没有设置高度（希望高度随子元素的多少来自由改变）

2.影响下面的布局

三 常用的三种方法

1. 父级元素添加overflow，将其属性设置为hidden（常用），auto，scroll

2.：after 伪元素法

.clearfix:after{
content:"";
display: block;
height:0;
clear: both;
visibility: hidden;
}
.clearfix{
*zoom:1;
}
/..照顾低版本浏览器../

3.:双伪元素清除浮动

.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}

二 定位

一 作用 

1.使元素可以自由的在一个盒子里移动位置，并且不压住其他盒子

2.滚动窗口时，盒子位置固定

二 用法  定位模式（方式）+边偏移（具体位置）

定位模式

static  静态定位

relative  相对定位

absolute 绝对定位

fixed  固定定位

边偏移

top         距离父元素上边线的距离

bottom   距离父元素上边线的距离

left         距离父元素上边线的距离

right       距离父元素上边线的距离

二 相对定位

选择器{
position：relative；
}

特点、

        1.相对于原来的位置移动

         2.原来的位置继续占有，后面的元素以标准流对待（不脱标）

三 绝对定位

选择器{
position：absolute；
}

特点 

1.如果没有父级及以上元素或祖先元素没有定位，以浏览器为定位标准

2.如果祖先元素有定位，则以最近的有定位的祖先元素为参考点

3.绝对定位不占有原先位置

居中方式

不可使用 margen：0 auto；可以使用以下方法

1.left：50%让盒子移动到父级元素的水平居中位置

2.margen-left：-100px；让盒子向左移动自身宽度一半

三 子绝父相

1.子集绝对定位，不占有位置，可放在父盒子的任何地方，不影响其他盒子

2.父盒子加相对定位，限制子盒子的位置

四 固定定位

选择器{
position：fixed；
}

特点

1.以浏览器的可视窗口为参照点移动元素

2.跟父元素没有关系

3.不随滚动条滚动而移动

4.投标（特殊的绝对定位）

五 定位叠放次序

选择器{
z-index：1；
}

1.数值可以是任意整数，默认为auto，数字越大，越靠上

2.属性相同时，后来居上

3.数字后无单位

六 浮动与定位在使用时的区别

定位会完全压住盒子以及盒子中的文字，而浮动只会压住盒子，不会压住文字（文字环绕爱效果）