浮动，定位

浮动原理：

清除浮动

高度塌陷是怎么造成的，浮动元素脱离当前文档流，然后无法撑起父容器导致了高度塌陷，因为父容器没有设置高度

解决方法：

1.将父元素变成bfc元素

2.父元素浮动

3.清除浮动：

通过给父元素的伪元素清除浮动，子元素就不会造成塌陷，为什么clear：both这个清除浮动必须放在伪元素上面？

mdn上解释：clear 属性指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。clear属性适用于浮动和非浮动元素。因为在浮动元素下面，所以就把父容器撑起来了

定位，display，给父元素高度等等方法都可以

---

1.static

如果没有指定我们的position，那么会自动设置为position:static

当我们设置为static的时候就是正常的静态的时候的表现，当设置为static的时候，上下左右设置的px都是不生效的

2.absolute

绝对定位，相对于一个页面一个固定的位置！！！一般作为导航栏，定位原理是：一级一级往上找到父元素，找到定位不是static的元素，只要不是static就可以，依据这个元素来进行定位！！！一般情况下这个元素就是窗口！！

这个地方在wrapper的position属性并不是static，所以我们在窗口之前找到了wrapper，就绝对定位在wrapper下面

3.fixed

这个固定定位始终定位在页面右下角！

4.relative

原来的空间依然占据，只是展现的位置根据top和left进行了改变

5.sticky

如果不设置任何的上下左右，那么他的值就相当于relative。

如果我们设置了像素，在移动的时候类似于fixed，当触及到父元素的底部时候会跟着父元素一起移动。