原始代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>为什么绝对定位让父元素产生了滚动条</title>
</head>
<body>
<style>
div{
position: absolute;
left:120%;
width:50px;
height:50px;
background: aqua;
}
</style>
<div>asdfasdf</div>
</body>
</html>
提出疑问
- 为什么即使是绝对定位元素，已经脱离文档流了。但是当横向超出了body，也会出现横向滚动条。
- 给div套一层section，设置其position:relative;现象是也会出现滚动条。
- 给section再设置overflow:auto；滚动条就出现在section内部了，不再是html的了，为什么？
解释
- 一开始我用如下代码使得滚动条消失了：
body{
overflow:hidden;
}
所以想当然觉得滚动条是body产生的。但是想不通为什么出现了滚动条
，因为我认为绝对定位元素脱离文档流之后，不占据空间，就应该不会对元素内容大小造成影响。而滚动条的出现意味着中间的内容被撑开了。但是中间的内容是从哪里来的呢？
后来若愚老师提醒，position:absolute设定之后是相对于html根节点做了定位，而对于html来说，它是可以看到absolute元素的。也就是说滚动条的出现是由html产生的。后来我用如下代码的确证明产生滚动条的根源在于html。
html{
overflow:hidden;
}
进一步解释：
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
可见这里就是找不多最近的已定位祖先元素，只能相对于最初的包含块，即html进行定位。
- 有人会说加一个给定位点加一个relative，那不就会相对于relative元素（即最近的已定位的父元素）定位，那这样滚动条不就应该属于该元素了吗？其实不然。具体原因往下看。
- MDN中有如下这样一句话：
Using the overflow property with a value different to visible (its default) will create a new block formatting context
先来解释一下什么叫block formatting context，就是简称BFC，中文一般称作“块级格式化上下文”。
指的深入研究
w3school中有这样一句话：元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
那么框到底是什么？？？？？有哪些类型？？？
感谢
方方老师，若愚老师在饥人谷中的回答
