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