CSS（层叠样式表）是一种用来表现HTML或XML等文件样式的计算机语言。
今天讲的就是CSS里面的浮动与定位
首先就是如何设置浮动？
一般就是使用float属性来设置浮动，基本语法格式就是 选择器{float：属性值；}。left元素向左浮动，right元素向右浮动，none元素不浮动。浮动是CSS里布局最经常使用的属性，也是关键的所在。
什么是文档流？
文档流是相对于盒子模型讲的，当某个div脱离了这个整体，也就代表他脱离了文档流。然后下一个div就会来填补脱离的div的位置。
设置浮动后元素脱离文档流会导致父元素高度塌陷，如何解决？
首先如果父元素存在固定高度，就不会出现塌陷的情况，所以在已知子元素的高度情况下，我们可以给父元素设置一个固定高度来解决。或者我们也可以给父元素也设置一个浮动，让它与子元素一起脱离文档流浮动起来，也可以很好的解决。
定位分为相对定位，绝对定位，固定定位，粘滞定位四种定位。
相对定位是相对于它的起点（最初位置）开始定位的，当开始移动后依旧占据原来的位置，会导致覆盖其他元素。
绝对定位可以使元素位置与文档流无关，它的位置相对于普通流中的位置，绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
固定定位永远都会相对于浏览器窗口进行定位，固定定位会固定在浏览器的某个位置，不会随滚动条滚动。
粘滞定位与相对定位类似，既不会脱离普通流，也不会改变元素盒的类型，并且会保留原先所占的位置。它会相对于包含块偏移，它的包含块分为两种，第一种和绝对定位一样；第二种是最近的滚动祖先。
标签：浮动,定位,元素,位置,相对,文档,CSS 来源： https://blog.csdn.net/weixin_60619442/article/details/121358640
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。