2021-01-26

1.清除浮动带来的影响
clear：用于清除浮动带来影响
none：默认值
left ：清除左浮动带来的影响
right：清除右浮动带来的影响
both：清除两侧的所带来的影响，(清除影响较大的影响)
2.相对定位
开启相对定位：
position：relative
*开始相对定位会提高元素的层级，但不会脱离文档流
*定位需要依靠偏移量去设置移动的位置的：
（left/right、top/bottom）一般情况下偏移量的设置只需要水平一个坐标，垂直一个坐标。
*没有设置偏移量的时候位置默认不变。
*相对定位移动的参照物就是其本身，参照位置是原位置起始坐标点(0，0）
*相对定位不会改变元素的性质(内联元素span不会改变为块元素或者行内块元素）
3.绝对定位
*开启绝对定位之后，元素会脱离文档流。
*position：absolute；元素默认是最初的位置
*绝对定位的参照物，是最近以开启定位的祖先元素，如果没有以开启定位的祖先元素，默认参照浏览器的窗口。
*绝对定位会改变元素的性质(内联元素会改变为块元素）
4.固定定位
开启固定定位 position：fixed
*本质也是绝对定位
*和绝对定位大多数的特征是一样的，不同之处是它的参照物始终是body
5.元素的层级
*开始过定位的元素，他们有层级关系，可以通过一个属性z-index来调整元素的层级
*如果没有开启定位使用z-index调整元素的层级是没用的，
* 如果没有设置过元素的层级，默认层级一样，但是会优先显示靠下的元素。
* z-index的值越大，层级越高。
* 祖先元素的层级无论多高，都不能盖住子元素
6.顶部导航条
外部容器nav相当于div
<div class ="top-bar-wrapper "
内部容器
<div class =“top-bar”
地址菜单
<div class =“location”

导航菜单