前端学习

　　浮动布局

　　一、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;

　　｝