CSS浮动与定位

CSS（层叠样式表）是一种用来表现HTML或XML等文件样式的计算机语言。

今天讲的就是CSS里面的浮动与定位

首先就是如何设置浮动？

一般就是使用float属性来设置浮动，基本语法格式就是 选择器{float：属性值；}。left元素向左浮动，right元素向右浮动，none元素不浮动。浮动是CSS里布局最经常使用的属性，也是关键的所在。

什么是文档流？

文档流是相对于盒子模型讲的，当某个div脱离了这个整体，也就代表他脱离了文档流。然后下一个div就会来填补脱离的div的位置。

 

设置浮动后元素脱离文档流会导致父元素高度塌陷，如何解决？

首先如果父元素存在固定高度，就不会出现塌陷的情况，所以在已知子元素的高度情况下，我们可以给父元素设置一个固定高度来解决。或者我们也可以给父元素也设置一个浮动，让它与子元素一起脱离文档流浮动起来，也可以很好的解决。

定位分为相对定位，绝对定位，固定定位，粘滞定位四种定位。

相对定位是相对于它的起点（最初位置）开始定位的，当开始移动后依旧占据原来的位置，会导致覆盖其他元素。

绝对定位可以使元素位置与文档流无关，它的位置相对于普通流中的位置，绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

固定定位永远都会相对于浏览器窗口进行定位，固定定位会固定在浏览器的某个位置，不会随滚动条滚动。

粘滞定位与相对定位类似，既不会脱离普通流，也不会改变元素盒的类型，并且会保留原先所占的位置。它会相对于包含块偏移，它的包含块分为两种，第一种和绝对定位一样；第二种是最近的滚动祖先。