浮动
元素的浮动是指设置了浮动属性的元素会脱离标准普通
流的控制,移动到其父元素中指定位置的过程。
语法: 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伪元素清除浮动
优点 : 结构语义化正确
缺点 : 由于IE67不支持:after,使用 zoom:1
1 .clearfix:after{ 2 content: ""; 3 display: block; 4 clear: both; 5 } 6 7 .clearfix{ 8 zoom: 1; 9 }
定位
1.postion: static 默认值 静态定位
2.postion : relative : 相对定位
特点 : 不脱离文档流 ,以自身的位置来定位的
应用场景: 1. 微调元素
2.做绝对定位的参考,子绝父相
3.position:fixed : 固定定位
不管怎么滚动滚动条,始终固定在某个位置
特点 : 脱离了文档流,以浏览器窗口来定位的
4.position:absolute : 绝对定位
特点 : 脱离了文档流, 以最近已定位的”父元素”的位置来
说的,如果父元素都没有定位,以html的位置来说的
备注 : 已定位的”父元素”可以是 绝对定位/ 相对定位/固
定定位,子绝父相用的最多
方向关键字
left : 正值是向右走的
top : 正值是向下走的
right
bottom
注意: static定位身上不能用方向关键字
脱离文档流的元素
1.固定定位
2.绝对定位
3.浮动
特点 : 类似于行内块元素,如果不设置宽高,它的宽高是由内容撑开的,即使是行内元素,可以设置宽高