一html 模型分为两种：
1.1 盒模型 margin padding border
个人理解这种模型是由外向内的，外部元素决定内部元素的位置，大小，长宽，
1.2 line box 模型
个人理解这种模型是由内向外的，内部元素决定外部元素的长宽，大小
二 line box 模型分析
2.1 inline box
这东西就是行内元素，比如span 比如 img 比如 i 比如 文字 这些东西都是 inline box 他们之间的组合是inline boxes 这些东西的共同点就是按行排列，底线对齐，出现文字的话，文字在基线上，其他元素的底和文字底对齐，
2.2 line box
这东西是一行inline box 组成的，line box的高度是 所有的 inline box中最高的那个的高度
2.3 contain box
这东西官方比喻叫坐标系，比如一个div 里面都是 line box组成的，那这些linebox的line-height加在一起组成contain box 的高。
三 display 的三种属性
3.1 inline
设定本元素不管以前是什么现在都是行内元素，对应上面的line box模型 也就是 inline box ，该元素没有高度，没有长度，他的长宽将由内部的contain box来决定
3.2 block
设定本元素不管以前是什么现在都是块级元素，可设置长宽，如果内部的contain box的height 超出了block的宽度，block不会被挤大，而是不变，contain box会超出block
3.3 inline-block
行内块元素，性质是行内排列，但是可以设置长宽，如果contain box 的height 超出了inline-block的height inline-block也不会被撑大，contain box 会挤出去
四float 具体作用
4.1 将display属性设置为 inline-block
分为两种情况
1 本身元素属性是 inline
本身元素属性是inline ,本元素和其他inline元素组成line box ，元素被float,元素的display被变为 inline-block，元素不再可以组成line box，不再遵循基线对齐的规定，而是根据float的left属性，移动到contain box的最左侧，原本的line box 因为失去了图片，导致高度塌陷，此时元素本身不再属于line box,float规定float占据行内元素的空间不占据块级元素的空间 ,这时 inline-block 属于行级元素，不会被覆盖掉。
2 本身元素属性是block
本身元素属性是 block 只是忽略掉上面的高度塌陷的部分，其他的都和inline元素一样
4.2 按float的方向将元素移动到相应位置
4.3 将元素脱离文档流