盒子模型和浮动布局（清除浮动）

元素实际大小

width/height+border+padding

设置box-size：border-box

元素实际大小： width/height

html元素的分类

块元素：可设置宽高，常见有ul、li、h1
行内元素：不可，常见有a、span
行内块元素：可，常见有img、input、button

清除浮动

1. 利用一个空div设置clear：both属性
2. 伪元素清除浮动

// 给浮动元素前后均加一个空盒子，并设置clear: both
.clear::before,.clear::after{
      content: '';
      display: block;
      clear: both;
    }