浮动


元素的浮动是指设置了浮动属性的元素会脱离标准普通


流的控制，移动到其父元素中指定位置的过程。


语法 : float :


left


right


none( 默认 )


注意 :


1. 浮动的元素要有父元素


2. 浮动后的元素类似元素行内块元素 , 如果没有设


置宽高 , 它的宽等同于内容的宽高 . 即使行内元


素浮动后也可以设置宽高 .


3. 浮动的元素会脱离文档流 , 但是没有脱离文本流


4. 兄弟 ( 块级元素 ) 之间要想在一排展示 , 都要浮动


浮动带来的影响


父元素高度塌陷 : 子元素浮动 , 父元素没有设置高 , 子元素


不能把父元素的高给撑开 , 导致父元素没有高度 , 这种现


象叫父元素高度塌陷 .


清除浮动 1. 加固定的高


缺点 : 不灵活


2. 额外标签法


在父元素的末尾加一个空 div, 给父元素设置


clear:left/right/both


优点：


通俗易懂，书写方便


缺点：


添加许多无意义的标签，结构化较差。


3. 父级添加 overflow 属性方法


在父元素身上设置 : 除了 visible 以外的其他 overflow


的值都可以 , overflow:hidden/scroll/ auto,


原因 : 是 overflow 触发了 BFC, 在计算 BFC 高度的时


候 , 浮动的子元素的高度也计算在内


优点 : 代码简洁


缺点 : 无法显示需要溢出的元素


4. 使用 after 伪元素清除浮动


优点 : 结构语义化正确


缺点 : 由于 IE6­7 不支持 :after ，使用 zoom:1 


.clearfix:after{ content: ""; display: block; clear: both; }.clearfix{ zoom: 1; }



定位



1.postion: static 默认值 静态定位



2.postion : relative : 相对定位



特点 : 不脱离文档流 , 以自身的位置来定位的



应用场景 :



微调元素



做绝对定位的参考，子绝父相



3.position:fixed : 固定定位



不管怎么滚动滚动条 , 始终固定在某个位置



特点 : 脱离了文档流 , 以浏览器窗口来定位的



4.position:absolute : 绝对定位



特点 : 脱离了文档流 , 以最近已定位的 ” 父元素 ” 的位置来



说的 , 如果父元素都没有定位 , 以 html 的位置来说的



备注 : 已定位的 ” 父元素 ” 可以是 绝对定位 / 相对定位 / 固



定定位 , 子绝父相用的最多 方向关键字



left : 正值是向右走的



top : 正值是向下走的



right



bottom



注意 : static 定位身上不能用方向关键字



脱离文档流的元素



1. 固定定位



2. 绝对定位



3. 浮动



特点 : 类似于行内块元素 , 如果不设置宽高 , 它的宽高是由



内容撑开的 , 即使是行内元素 , 可以设置宽高



z­index



用于调节定位后的层级关系



static 定位身上不能用 z­index



默认值是 auto( 可以理解是 0)



z­index 值越大 , 层级越高 , 都是整数 , 可以支持负值 , 盒子



就看不到啦



块级元素水平垂直居中



1 

前提条件:必需知道该盒子的宽度和高度； position: absolute/fixed; left:50%; top:50%; margin-left:-盒子宽度的一半; margin-top:-盒子高度的一半;

2

（该方法兼容ie8以上浏览器） position: absolute/fixed; left:0; top:0; right: 0; bottom: 0; margin:auto;