一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。
Position的值有哪些，分别有哪些作用
tatic：默认值
不脱离文档流，top，right，bottom，left等属性不生效
绝对定位：absolute
绝对定位的关键是找对参照物，要成为绝对定位元素的参照物必须满足以下两个条件：
- 参照物和绝对定位元素必须是包含与被包含关系；
- 该参照物必须具有定位属性； 如果找不到满足以上两个条件的父包含块，那么相对于浏览器窗口进行定位
注：设置了position:absolute;属性后，元素会脱离正常文档流，不在占据空间；左右margin为auto将会失效；我们通过left、top、bottom、right来决定元素位置 相对定位：relative 参照物：元素偏移前位置 注：设置了相对定位，左右margin为auto仍然有效、并且不会脱离文档流。 固定定位：fixed 参照物：浏览器窗口； 注：固定定位会脱离文档流；当绝对定位和固定定位参照物都是浏览器窗口时的区别：当出现滚动条时，固定定位的元素不会跟随滚动条滚动，绝对定位会跟随滚动条滚动
为什么会出现浮动？浮动元素会引起什么问题？如何清除浮动？
浮动定位将元素排除在普通流之外，即元素讲脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留 为什么需要清除浮动
- 父元素的高度无法被撑开，影响与父元素同级的元素；
- 与浮动元素同级的非浮动元素（内联元素）会跟随其后；
- 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构解决方法 清除浮动的方式
- 使用CSS中的clear:both;（放一个空的div，并设置上述css）,属性来清除元素的浮动可解决
- 给父级元素设置双伪元素；
- 给父级元素设置overflow：hidden；或overflow：auto；本质是构建一个BFC
如何解决margin“塌陷”
外边距塌陷共有两种情况：
第一种情况：两个同级元素，垂直排列，上面的盒子给margin-bottom下面的盒子给margin-top，那么他们两个的间距会重叠，以大的那个计算。解决这种情况的方法为：两个外边距不同时出
第二种情况：两个父子元素，内部的盒子给margin-top，其父级也会受到影响，同时产生上边距，父子元素会进行粘连，决绝这种情况的方法为：父级添加一个css属性，overflow：hidden，禁止超出外边距重叠就是margin-collapse 解决方案：
- 为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合（可以设置成透明：border：1pxsolidtransparent）；
- 为父盒子添加overflow：hidden；
- 为父盒子设定padding值；
- 为父盒子添加position：fixed；
- 为父盒子添加display：table；
- 利用伪元素给父元素的前面添加一个空素
.father::before{content:'';display:table;}
