css浮动及定位

一、css宽度的计算等式

左右外边距加左右边框加左右内边距加content==父元素的宽度

二、浮动的结果

1、不在占据原来的位置在原来的上一层
2、多个div会依次排列
3、行内元素设置浮动会拥有行内块元素的属性

三、清除浮动的方式

给浮动元素的父级元素设置overflow:hidden;
在浮动元素的同级下添加一个空标签，并且设置clear:both;
浮动元素的父级元素使用::after{clear:both;content:‘’;display:block;}

四、四种定位

相对定位元素的特点(用法:子绝父相)relative
1、相对于自己的左上角
2、不会改变自己的语义
3、会改变自己的层级
4、不会脱离标准流

绝对定位 absolute
1、脱离文档流
2、会提升语速的层级
3、绝对定位参照的位置
4、参照开启了定位的是最近的祖先元素,如果祖先都没有设置定位,则参照整个网页

固定定位 fixed
1、元素会脱离文档流
2、参照浏览器视口进行定位

粘性定位 stick
1、参照位置：参照浏览器视口进行定位
2.不会脱离文档流,会提升层级