盒子模型 浮动 定位

浮动 float

自身脱离文档流，会影响后面的文档流，想要清除浮动：

方法一：给其父元素添加overflow: hidden; 【溢出隐藏】

导航栏

清除列表样式

ul {
    list-style: none;
}

li {
    float: flex;
}

盒子模型 

万物皆盒子

高度塌陷 BFC

即两个盒子之间的距离[margin]，是两者中最大者

【任何情况margin都不包含在宽高中，而border和padding可能会影响宽高】

margin: 外边距，两个盒子之间的距离

border: 边框 

padding：内边距

box-sizing: border-box // width = content的宽度 + padding + border
box-sizing: content-box(默认)

定位

5个属性: top bottom left right z-index

设置以下五种定位类型后，根据性能可用以上5个属性相应改变自己的位置