首页 > 代码库 > css - 浮动和定位
css - 浮动和定位
浮动
Float: left | right
特点:
◆浮动的元素不占位置(脱标)
◆可以将行内元素转化为行内块元素
◆块级元素在一行上显示
◆置了浮动的元素,影响其后面的元素
作用:
◆解决文字图片环绕问题
◆制作网页导航栏
◆网页布局
清除浮动:
清除浮动的影响。
.clearfix:after{ content:""; height: 0; line-height:0; display:block; clear:both; visibility: hidden; } .clearfix{ zoom: 1; /* IE */ }
定位
position:static | absolute | relative | fixed
静态定位(static)
绝对定位(absolute)
◆绝对定位绝对脱标(不占位置)
◆行内元素转化为行内块元素
◆如果父盒子没有设置定位,以浏览器左上角为基准设置定位
◆如果父盒子设置定位, 以父容器左上角为基准设置定位
相对定位(relative)
◆看自己的位置设置定位
◆相对定位没有脱标,占位置
子绝父相(子元素设置绝对定位,父元素设置相对定位)
一般情况下会使用子绝父相。
固定定位(fixed)
◆固定定位也脱标了(不占位置)
◆行内元素转化为行内块元素
css - 浮动和定位
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。