再谈定位和浮动的问题

开启浮动和定位（绝对定位和固定定位）元素都会脱离文档流

脱离文档流的元素有哪些特点？

对别人：高度塌陷，宽度塌陷的问题，开启浮动或者是定位的元素的父元素的宽和高不再由开启浮动或者是定位的元素的宽和高来决定，也就是开启浮动或者是定位的元素的宽和高对其父元素的宽和高没有影响

对自己：自己可以设置宽和高了，当然也有默认的宽和高（默认的宽和高由其元素的宽和高来决定了），特别注意的是，当一个元素开启了（绝对定位或者是固定定位以后）定位后，在该元素内写%是相对于其开启了定位的包含块的元素%来说的

脱离文档流的元素，在结构上，其下面的元素会占据脱离文档流元素之前的位置，比如：看到这种情况

结构上：

想想，下面这个美图练习中，为什么这个地方设置了背景颜色，但是没有生效

打开工具，检查后发现

为什么nav里面明明有字，虽然没有给.nav明确指定高度，但是也应该有高度啊？

出现这个原因在于，我们给.nav的父元素left-menu开启了相对定位，而且还给.nav设置了top:48px，bottom:0px,但是.left-menu的高度也是48px，要满足那个等式关系,.nav的高度也只能是0了，所以这个background-color颜色设置了是不会生效果的，因为background-color是指内容区和padding区的颜色