高度坍塌
父元素自适应高度，子元素设置浮动后导致父元素高度为0的现象。解决此现象的方法就叫做清除浮动，清除浮动之后，父元素就会根据子元素自适应高度。
四种解决方法
1. 额外标签法
在父元素内部**最后**添加一个子元素
清除前：高度坍塌
清除后：自适应高度
大神的书中提到了一个缺点：如果清除浮动的元素不写在末尾就会破坏布局。
代码示例如下：demo.cssworld.cn/6/2-1.php
2. BFC：为父元素添加overflow属性，其值为hidden/auto/scroll
缺点：hidden的话无法显示溢出部分
3. 利用伪元素after。其实还是利用了伪元素的特性，不用再html中书写dom结点，利用纯css解决问题。注意利用zoom：1兼容IE浏览器。
4. 双伪元素 before + after 清除浮动
BFC定义
在清除浮动的方法中第三种利用overflow属性的方法提到了BFC，BFC的全程为block formatting context，块级格式化上下文。作者称之为“CSS世界的结界”。对应还有Inline formatting context，内联格式化上下文。
特点就是：BFC元素内部元素不会影响到外部元素。那么就是说如果一个父元素是BFC元素，那么就会清除子元素浮动带来父元素高度塌陷的影响(如果高度塌陷了，就相当于影响了父元素后面元素的布局)。
火影中最强结界：四赤阳阵。。。。
触发BFC的几种情况
1. 根元素
2. float的值不为none
3. overflow的值为auto，scroll，hidden(超棒,IE7及以上)
4. display的值为table-cell**(IE/8)，table-caption，inline-block(IE6/7)**的任何一个。父元素设置为inline-block的时候会导致包裹尺寸收缩，有些尴尬。
5. position的值不为relative或static
自适应解决方案（IE7及以上）
大神提炼了两套方法
-
.father {overflow: hidden}
-
.father {display: table-cell; width: 9999px; *display:inline-block; *width:auto}
overflow注意事项
避免滚动容器设置padding-bottom的值，因为Chrome浏览器将padding-bottom的值算在了滚动尺寸之内，同时导致scrollHeight值不一样。
overflow-x/overflow-y
如果这两个属性的值都是visible，否则visible会当成auto来解析。
scrollTop
PC端dscrollTop是通过document.documentElement.scrollTop获取的。因为PC端的滚动条来自而不是标签。所以去除页面默认滚动条需要对作用。
移动端通过document.body.scrollTop获取的。
滚动条会占位置盒子的宽度，一般浏览器的滚动条宽度为17px，在我之前有篇文章提到过：juejin.cn/post/685457…
最后
书后面还有一些内容，不过在日常开发中没有碰到，先留个尾巴
