CSS进阶（八） float
float的本质就是为了实现文字环绕效果
特性
（1）包裹性，即父元素的宽度大于子元素的宽度，最终展现的效果为子元素的宽度
（2）块状化并格式化上下文。display变为block或table
（3）破坏文档流
（4）没有任何margin合并
text-align对块级元素是无效的
float实现一栏固定的多栏布局时，要巧妙的配合margin属性使用
clear属性的自身不能和前面的浮动元素相邻，clear:left和clear:right没有任何使用价值，直接使用clear:both
clear属性只有块级元素才是有效的，再借助伪元素清除浮动时，需要设置display属性
clear属性的本质是让自己不和float元素在一行显示，并不是真正意义上的清除浮动
BFC元素
（1）<html>根元素
（2）float的值部位none
（3）overflow为ayto,scroll,hidden
（4）display为table-cell,table-caption,inline-block
（5）position不为relative,static
BFC 的结界特性最重要的用途其实不是去 margin 重叠或者是清除 float 影响，而是实 现更健壮、更智能的自适应布局。
要想彻底清除浮动的影响，最适合的属性不是 clear 而是 overflow。
overflow 的剪裁或者滚动的边界是 border box 的内边缘，而非 padding box 的内边缘
在实际项目开发的时候，要尽量避免滚动容器设置 padding-bottom 值
overflow-x overflow-y
永远不可能实现一个方向溢出剪裁或滚动，另一方向内容溢出显示的效果。
滚动条
（1）PC端，无论什么浏览器，滚动条均来自<html>
（2）滚动条会占用元素的可用宽高
webkit下常用的滚动条设置属性
::-webkit-scrollbar 血槽宽度
::-webkit-scrollbar-thumb 拖动条
::-webkit-scrollbar-track 背景槽
锚点定位
实现方式
（1）使用a标签的name属性
（2）使用元素的id属性
<a href="#">返回顶部></a>
触发方式
（1）URL地址中的锚链与锚点元素对应并有交互行为
（2）可focus的锚点元素处于focus状态 （浏览器内置的无障碍访问行为）
本质
锚点定位行为的发生，本质上是通过改变容器滚动高度或者宽度来实现的。
（1）锚点定位也可以发生在普通的容器元素上，而且定位行为的发生是由内而外的。由内而外指先触发容器的锚点定位，再触发外部容器的锚点定位，默认和浏览器上边缘对齐
（2）设置overflow:hidden的元素也是可以滚动的。滚 动依然存在，仅仅滚动条不存在
实现滚动条应用scrollTop
（1）实现简单，无须做边界判断
（2）可与原生的 scroll 事件天然集成，无缝对接
（3）无须改变子元素的结构。
缺点
（1）无法添加类似 Bounce 回弹这种动效
（2）渲染要比一 般的渲染慢一些
