1、 两个和float 相关的术语
①浮动锚点 float anchor
②浮动参考 float reference
浮动锚点是float所在流中的一个点，本身并不浮动。就表现而言，相当于一个没有 margin 、padding、border 的一个空的内联元素；
浮动参考指的是 浮动元素对齐参考的实体。
在css 中（非css3）， float 的浮动参考是 行框盒子。
浮动锚点的作用 ：就是产生行框盒子。
这样，float元素对齐参考的实体对块级元素也适用了就。 （有内联元素自然就会有行框盒子）
备注：在css3中， float 被赋予了更多的作用和使命， 浮动参考就不仅仅是行框盒子了。
2、clear 属性理解
none：默认值。 左右浮动来就来。 left：左侧抗浮动。 right：右侧抗浮动。 both：两侧抗浮动。
凡是用clear：rgiht 、clear：left 的地方，一定都可以用 clear：both来替换!
clear属性对后面的浮动元素不闻不问。
clear属性只有块级属性才有效。 因此，一些：：after伪元素需要设置 dispaly：block；
clear：both的本质是 让自己不和浮动元素在一行显示， 并不是真正意义上的清除浮动。
由此可见， clear：both只能在一定程度上消除浮动的影响。要想完美的去除浮动元素的影响，还得依赖其他css声明， 比如 bfc
3、BFC 块级格式化上下文 block formatting context
(css中的结界)
常见的触发BFC ：
float 不为none；
overflow的值为auto、scroll、hidden；
display的值为：table-ceil、table-caption、inline-block;
positon的值不为relative、static；
换言之， 只要元素符合上面任意一个条件， 就不需要clear：both去清除浮动的影响了。
4、 BFC 与 流体布局
BFC的结界特性 最重要的用途 其实不是 去margin重叠 或者 清除float影响， 而是实现更健壮的、更智能的自适应布局。
BFC的表现原则：具有BFC特性的元素的子元素不会受外部元素的影响， 也不会影响外部元素。
普通流体元素在设置了overflow：hidden后， 会自动填满容器中除了 浮动元素以外的剩余空间，形成自适应布局效果。
在bfc的几个触发方式中，在css中，overflow 的方式最棒，元素本身还是一个很普通的元素，因此，块状元素的流体特性保存的相当完好，附上BFC区域的独立区域特性，可谓如虎添翼，宇宙无敌！
5、overflow
overflow 的本职工作其实是 裁剪。
这里有个浏览器差异，所以要避免设置滚动条的padding-bottom
关于overflow-x和overflow-y
除非overflow-x和overflow-y的值都设置成visible，否则visible会当成auto来解析。 换句话说，永远不可能实现 一个方向溢出裁剪或者滚动，另一个方向溢出显示的效果。
但是scroll、auto、hidden 三个属性值是可以共存的。
6、 overflow与滚动条
css中，有两个元素默认 是可以产生滚动条，html 与textarea
在PC端， 无论什么浏览器，默认滚动条均来自html，而不是body。
在pc端， 滚动条会占用容器的可用宽度或高度。
宽度一般为17px。
可以自己测：
.box{width:400px;overflow:scroll;}
<div class="box">
<div id="in" class="in"></div>
</div>
console.log(400-document.getElementById("in").clientWidth);
7、单行文字点点点效果
虽然依赖overflow：hidden， 但是以下三个声明却都是必需的：
.ell{
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
8、锚点定位
基于URL地址链的锚点（如#1，可以使用location.hash获取）实现锚点跳转的方法有两种： ①a标签以及name属性 ②使用标签的id属性
①
<a href="#1">发展历程</a>
②
<a href="#1">发展历程</a>
<h2 id="1">发展历程</h2>
第②种，因为html更干净，而且不存在任何兼容问题，更得到css世界作者的喜爱。
9、锚点定位行为的触发条件
有两种情况可以触发锚点定位行为： ①URL地址钟的锚链与锚点元素对应并有交互行为 ②可focus的锚点元素处于focus状态
明确：overflow：hidden的元素依然可以滚动。
锚点定位的本质是：改变容器的滚动高度。 scrollHeight（视区高度+滚动高度） clientHeight（视区高度）
牢记overflow：hidden元素依然可以滚动。
eg： 访问基于“focus锚点定位”实现的无javascript选项卡 切换效果实例。
该种实现方式，就算页面窗体就有滚动条，绝大多数情况下，也都不会发生跳动现象。
<div class="box">
<div class="list"><input id="one">1</div>
<div class="list"><input id="two">1</div>
<div class="list"><input id="three">1</div>
<div class="list"><input id="four">1</div>
</div>
<div class="link">
<label class="click" for="one">1</label>
<label class="click" for="one">1</label>
<label class="click" for="one">1</label>
<label class="click" for="one">1</label>
</div>
.box{
height:10em;
border:1px solid #ddd;
overflow:hidden;
}
.list{
height:100%;
background:#ddd;
positon:relative;
}
.list>input{
position:absolute ;
top:0;
height:100%;
widht:1px;
border:0;
padding:0;
margin:0;
clip:rect(0,0,0);
}
$('label.click').removeAttr('for')on('click',function(){
$('.box')scrollTop(xxx);//xxx表示滚动值
});
原理其实很简单，就是在每个列表里塞入一个 肉眼看不见的 输入框，然后把选项卡按钮变成label元素，并通过for属性与input输入框的id相关联，这样，点击选项按钮会触发输入框的focus行为，触发锚点定位，实现选项卡切换效果。
这种原理实现的选项卡还有一个优点就是，我们可以直接使用tab键来切换，浏览各项面板的内容，传统的选项卡实现并没有如此便捷的可访问性。
然而，上面这种技术要想用在实际项目中还离不开javascript的支持，一个是选项卡的选中效果，另一个就是处理里列表部分区域在浏览器外面时依然会跳动的问题。
这一技术只适用于高度固定的选项卡效果，如各大站点首页经常出现的幻灯片广告切换效果等。
实际上，如不考虑ie8浏览器，可以利用：：check伪类，单选按钮和label标签的点击行为实现选项卡切换。
10、自定义滚动效果
最推荐的实现还是 基于父容器自身的scrollTop值来改变 实现自定义 滚动条效果，好处如下：
（1）实现简单、无须做边界判断。
因为就算scroolTop设为-999，浏览器依然 按照0 来渲染，要想滚动到底部，直接一个很大的scroolTop值就可以了，无须任何计算。
例如： container.scrollTop=999999;
列表滚动了多少直接就是 scrollTop值，实时获取，天然存储。传统实现要变量以及边界更新，很罗嗦。
（2）可与原生的scroll事件天然集成，无缝对接。
例如：我们的滚动延迟加载图片效果就可以直接应用。因为图片位置的计算往往都是和scrollTop值相关联的，所以传统实现scrollTop值一直是0，很可能导致这类组件出现异常。
（3）无须改变子元素的结构。 传统结构为了实现方便，会给所有列表元素外面包一层独立的div元素，这可能导致某些选择器（类似于.container>.list{})失效，而基于父容器本身的scrollTop滚动实现则没有此问题，即使子元素全是兄弟元素也是可以的。
11、float 的兄弟：postion：absolute
共同特性：
块状化、包裹性、破坏性
positon：absolute 更霸道，存在的时候float 失效。
块状化： display的值为 block 或者table
包裹性：也就是尺寸收缩包裹，同时具有自适应性，有些人知道display：inline-block声明具有包裹性。
但是和float或者其他包裹性声明带来的自适应性相比，absolute 有一个平时不太被人注意的差异。那就是absolute的自适应性最大宽度往往不是由父元素决定的，，本质上说，这个差异性是由包含快的差异决定的。
换句话说，absolute元素具有与众不同的包含块。
12、absolute的包含块
包含块（containing block)这个概念 实际上大家一直都有接触，就是元素用来计算和定位的一个框，比方说，width：50%，也就是宽度一半，那到底是哪个元素宽度的一半呢？注意，这里的这个元素实际上就是指的包含块。
包含块的定义：
（1）根元素（很多情况下是html）被称为初始包含块，其尺寸等同于浏览器可视窗口的大小。
（2）对于其他元素，如果该元素的postion 是relative 或者static，则包含 块由最近的块容器祖先盒的content-box边界形成。
（3）如果元素positonLfiexed； 则包含块是初始包含块；
（4）如果元素position：absolute。则包含块由最近的postion部位static的祖先元素建立，具体方式如下：
如果该祖先元素是inline元素，则规则略复杂：
假设该内联元素的前后各生成一个宽度为0的内联盒子（inline box),则这两个内联盒子的padding box外面的包围盒就是内联元素的包含块；
如果该内联元素被跨行分割了，那么包含块是未定义的，也就是css2.1规范并没有明确定义，浏览器自行发挥。
否则，包含块就由该祖先的padding box边界形成。
可以看到，和常规元素相比，absolute绝对定位元素的包含块由以下3个明显差异：
（1）内联元素也可以作为包含块所在的元素；
（2)包含快所在的元素不是父块级元素，而是最近的position不为static的祖先元素或者根元素，；
（3）边界是padding-box 而不是content-box
13、包裹性的改变
添加wihte-space：nowarp； 让宽度表现从包裹性变成 最大可用宽度。
关于12的第三点差异，也就是计算和定位是相对于祖先定位元素的padding box，为何绝对定位的定位要相对于padding box呢？这其实 和overflow 隐藏也是padding box边界类似，都是由使用此场景决定的。
14、注意top right 等属性值和 padding 、margin 属性值耦合在一起带来的不好维护的问题。
尤其是margin ，因为margin box永远是透明的。
15、解决14问题的小技巧:
那就是间距不是使用padding撑开，而是使用透明的border撑开。
例如：
.list{
border:1rem solid transparent;
}
.tab{
position:absolute;
top:0;
right:0;
}
top、right属性值都是0，被固定了下来，于是当间距发生变化的时候，只需要改变border宽度就可以，例如
.list-2{
border:.75rem solid transparent;
}
15、具有相对特性的无依赖absolute绝对定位
请牢记这句话：
absolute是非常独立的css属性值，其样式和行为表现不依赖其他任何css属性就可以完成。
absolute定位效果万群不需要父族元素设置postion为relative或者其他什么属性就可以属性，我把这种没有设置left/top/right/bottom属性值的绝对定位成为 无依赖绝对定位。
很多场景下，无依赖绝对定位 要比使用left/top之类属性定位使用和强大许多，因为其除了代码更简洁外，还有一个很棒的特性，就是 相对定位特性。
无依赖绝对定位的本质就是相对定位，仅仅是不占据css流的尺寸空间而已。
不过补充一点，虽然无依赖绝对定位好处多多，但建议只用在静态交互效果上，比方说，导航二级菜单的显示与定位，如果是动态呈现的列表，建议还是使用javascript来计算和定位。
16、absolute与text-align
按道理讲，absolut和text-align一样，都可以让元素块状化，应该不会受控制内联元素对其的text-align属性影响，但是最后的结果出乎意料，text-align居然可以改变absolute元素的位置。
但其实，并不是text-align和absolute元素直接发生关系，asbolute元素的display计算值是块状的，text-align是不会有作用的。这里之所以产生了位置变化，本质上是幽灵空白节点和无依赖绝对定位共同作用的结果。
具体渲染原理如下：
代码：
<p><img src="1.jpg></p>
p{text-align:center}
img{positon:absolute}
（1）由于img是内联水平，p标签中存在一个宽度为0
