07Float浮动、CSS定位(position)-课堂作业
float浮动
CSS定位机制：普通流(标准流)，浮动，绝对定位
普通流(标准流) :默认状态,元素自动从左往右从上往下的排列。
CSS Float (浮动)的基础知识
- 会使元素向左或向右移动,只能左右,不能上下。
- 浮动元素碰到包含框或另一个浮动框, 浮动停止。
- 浮动元素之后的元素将围绕它,之前的不受影响。
- 浮动元素会脱离标准流。
浮动的基本语法:
float:left 向左浮动
float:right 向右浮动
float:left 不使用浮动
使用浮动后产生的问题
元素使用浮动后会脱离普通流,出现“高度塌陷”- - - - 浮动溢出
清除浮动语法 clear : none| left| right| both;
- 设置了float的元素会影响其他相邻元素,需要使用clear清除浮动,clear只会影响自身,不会对其他相邻元素造成影响!
清除浮动常用方法
- 方法一:在浮动元素后使用一个空元素。
例如: <div class= "clear"> </div>
- 方法二:给浮动元素的容器添加overflow:hidden;
*zoom:1; /*触发 hasLayout兼容IE 6、7*/
- 方法三:使用CSS3的:after伪元素
.clearfix:after{
content:"";
display: block;
height:O;
visibility: hidden;
clear:both;
}
.clearfix { *zoom: 1; /* 触发hasLayout兼容E 6、7*/ }
清除浮动其它方法
- 父级元素定义height。只适合高度固定的布局。
- 父级元素也一起浮动。 不推荐,会产生新的浮动问题。
CSS定位（position）
position之总结
static：静态定位/常规定位/自然定位——定位中一股清流-回归本真
作用：使元素定位于常规/自然流中(块、行垂直排列下去，行内水平从左到右)
特点：(1)忽略top、bottom、left、right或者z-index声明
(2)两个相邻的元素如果都设置了外边框，那么最终外边距=两者外边距中最大的
(3)具有固定width和height的元素，如果把左右外边距设置为auto，则左右外边距会自动 扩大沾满剩余宽度，造成的效果就是这个块水平居中
relative：相对定位
作用：使元素成为containing-block-官话是可定位的祖先元素
特点：(1)可以使用top/right/bottom/left/z-index进行相对定位
(2)相对定位的元素不会离开常规流
(3)任何元素都可以设置为relative，它的绝对定位的后代都可以相对于它进行绝对定位
(4)可以使用浮动元素发送偏移，并控制它们的堆叠顺序
absolute：绝对定位
作用：使元素脱离常规流
特点：(1)脱离常规流
(2)设置尺寸要注意：百分比比的是谁
(3)irtb如果设置为0，它将对齐到最近定位祖先元素的各边
(4)irtb如果设置为auto，它将被打回原形
(5)如果没有最近定位祖先元素，会认<body>做爹爹
(6)z-index可以控制堆叠顺序
fixed：固定定位
作用：我跟绝对定位本是同根生相煎何太急
特点：(1)跟absolute区别——相对于谁做绝对定位
(2)固定定位元素不会随着视口滚动而滚动
(3)继承absolute特点
sticky：磁贴定位/粘性定位/吸附定位——赛季新秀，实力布局糖
作用：relavtive+fixed的完美结合，制造出吸附效果
特点：(1)如果产生偏移，原位置还是会在常规流中，一亩三分地留着
(2)如果它的最近祖先元素有滚动，那么它的偏移标尺就是最近祖先元素
(3)如果最近祖先元素没有移动，那么它的偏移标尺是视口
(4)上下左右的偏移规则
浙公网安备 33010602011771号