浮动布局
一、display总结
1.inline
（1）同行显示，就相当于纯文本，当一行显示不下，如就是一个字显示不下，那么显示不下的那一个字就会自动换行，和纯文本的区别就是有标签整体的概念，标签与标签间有一个空格的隔断
（2）支持部分css样式， 不支持宽高 | 行高（行高会映射到父级block标签）| margin上下
（3）content由文本内容撑开
（4）inline标签只嵌套inline标签
2.inline-block
（1）同行显示，当一行显示不下，标签会作为一个整体换行显示
（2）支持所有css样式
（3）content默认由文本（图片）内容撑开，也可以自定义宽高，当自定义宽高后，一定采用自定义宽高（显示区域不足，内容会在标签内换行显示，可能超出显示区域）
（4）inline-block标签不建议嵌套任意标签
3.block
（1）异行显示，不管自身区域多大，都会独占异行
（2）支持所有css样式
（3）width默认继承父级，height由内容（文本，图片，子标签）撑开，当设置自定义宽高后，一定采用自定义宽高
（4）block可以嵌套任意标签
二、overflow知识
本质：
overflow：处理内容超出盒子显示区域
overflow：auto | scroll | hidden
auto：自适应，内容超出，滚动显示超出部分，不超出则正常显示
scroll：一直采用滚动方式显示
hidden：隐藏超出盒子显示范围的内容
三、浮动布局
float：浮动布局，改变BFC的参照方位
为什么要使用：使用它，块级盒子就会同行显示
float：left | right； 左 | 右 浮动
left：BFC参照方向从左向右
fight：BFC参照方向从右向左
浮动的区域由父级的width决定
四、清浮动
浮动问题：子级浮动了，不再撑开父级的高度，那么父级如果拥有兄弟标签，可能就会出现布局重叠问题
清浮动：解决上面的问题，通过使父级获取一个合适的高度，这样子级就不会和父级的兄弟布局发生重叠
clear： left | right | both
① 设置父级的死高度
② 通过兄弟设置 clear：both
③ 设置父级overflow属性
④ 设置父级after ｛
content： "";
display: block;
clear: both;
｝