一、边距重叠常见情况
1、垂直方向上相邻元素的重叠
（水平方向上不会发生重叠）
2、 垂直方向上父子元素间的重叠
二、BFC
1、什么是 BFC
BFC（Block Formatting Context），即块级格式化上下文，创建了 BFC 的元素是一个独立的容器，里面无论如何布局都不会影响到外面的元素
2、创建 BFC 的方法
（1）设置 overflow 属性，除了 visible 以外的值（例如 hidden、auto）
（2）设置 float 属性，除了 none 以外的值（例如 left、right）
（3）设置 position 属性，除了static 和 relative 以外的值（例如 absolute、fixed）
（4）设置 display 属性，可以是 flex、inline-block、table-cell...
3、BFC 的使用场景
（1）解决元素间的边距重叠问题 -- 分别添加创建了 BFC 的父元素
<!-- 创建BFC前 -->
<body>
<div></div>
<div></div>
</body>
<!-- 创建BFC后 -->
<body>
<section>
<div></div>
</section>
<section>
<div></div>
</section>
</body>/* 创建BFC前 */
div {
width: 100px;
height: 100px;
background: #7b81ca;
margin: 30px;
}
/* 创建BFC后 */
section {
overflow: hidden;
}
div {
width: 100px;
height: 100px;
background: #7b81ca;
margin: 30px;
}（2）解决浮动重叠问题 -- 为非浮动的元素创建 BFC
（常用于文字环绕图片的效果）
<body> <section></section> <div></div> </body> /* 创建BFC前 */ section { width: 100px; height: 200px; background: rgba(244, 220, 250, 0.8); float: left; } div { width: 200px; height: 100px; background: rgba(123, 129, 202, 0.8); } /* 创建BFC后 */ section { width: 100px; height: 200px; background: rgba(244, 220, 250, 0.8); float: left; } div { width: 200px; height: 100px; background: rgba(123, 129, 202, 0.8); overflow: hidden; }
（3）清除浮动，解决浮动元素的父元素高度塌陷问题 -- 为父元素创建 BFC
<body>
<section>
<div></div>
</section>
</body>
/* 创建BFC前 */
section {
background: rgba(244, 220, 250, 1);
}
div {
width: 100px;
height: 100px;
background: rgba(123, 129, 202, 1);
float: left;
}
/* 创建BFC后 */
section {
background: rgba(244, 220, 250, 1);
overflow: hidden;
}
div {
width: 100px;
height: 100px;
background: rgba(123, 129, 202, 1);
float: left;
}CSS选择器_伪元素选择器之处理父元素高度及外边距溢出
最小高度为100px的父元素，嵌套一个300px高度的子元素，当子元素浮动时，父元素高度并不随之升高。在某些特殊的条件下，为子元素设置上外边距时，有可能会作用到父元素上。
CSS外边距折叠引发的问题
CSS外边距折叠：第一种：两个块级元素的上下边距折叠。第二种：父元素和子元素（或者最后一个元素）的外边距。第三种：空的块级元素的上下外边距
CSS 外边距(margin)重叠及防止方法
边距重叠解决方案(BFC)，首先要明确BFC是什么意思，其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文”，外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。
js获取网页相对边距
getBoundingClientRect 用于获取某个元素相对于视窗的位置集合。集合中有 top, right, bottom, left 等属性。注意: availLeft/availTop 大多数情况下，返回 0。获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的属性
页面直接导出为PDF文件，支持分页与页边距
将WEB页面直接导出为pdf文件是经常会用到的一个功能，尤其是各种报表系统。总结了一下目前几种主流的做法：在后端用代码生成pdf文件，比如iText一类；在后端抓取页面并生成pdf文件，比如phantomjs一类；
Js获取滚动的头部距离和左边距离
Js获取滚动的头部距离和左边距离：在js中，经常会用到需要获取头部距离和左边距离的小功能，在这里封装一下，以后可以直接调用即可：
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!