子DIV滚动时父元素不受影响
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了子DIV滚动时父元素不受影响相关的知识，希望对你有一定的参考价值。
参考技术A <!DOCTYPE html><html lang='en'>
<head>
<meta charset='utf-8'>
<title>One Page</title>
<script src='one.js'></script>
<style>
.box
width: 500px;
height: 500px;
background: rgba(0, 255, 0, 0.5);
overflow-y: scroll;
</style>
</head>
<body>
<div class='box'>
<h2>内部滚动完毕后不会影响到父元素</h2>
<h2>内部滚动完毕后不会影响到父元素</h2>
<h2>内部滚动完毕后不会影响到父元素</h2>
<h2>内部滚动完毕后不会影响到父元素</h2>
<h2>内部滚动完毕后不会影响到父元素</h2>
<h2>内部滚动完毕后不会影响到父元素</h2>
<h2>内部滚动完毕后不会影响到父元素</h2>
<h2>内部滚动完毕后不会影响到父元素</h2>
<h2>内部滚动完毕后不会影响到父元素</h2>
<h2>内部滚动完毕后不会影响到父元素</h2>
<h2>内部滚动完毕后不会影响到父元素</h2>
<h2>内部滚动完毕后不会影响到父元素</h2>
<h2>内部滚动完毕后不会影响到父元素</h2>
<h2>内部滚动完毕后不会影响到父元素</h2>
<h2>内部滚动完毕后不会影响到父元素</h2>
</div>
<div>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
<h1>测试测试测试</h1>
</div>
<script src='jquery-3.1.1.min.js'></script>
<script>
window.onload = function()
</script>
</body>
</html>
BFC的理解
什么是BFC？
全称块级格式化上下文？什么意思不懂。看了好多博客，基本都是抄的，真心都不是大白话。我今天来总结一下，用菜鸟级别的语言来描述。
BFC 应该可以抽象成一个 独立的个体，出淤泥而不染的白莲花。
是的不受其他元素的影响，始终保持自己独立。就是正常的普通流布局规则，设置的样式是什么样的，就按正常的普通流布局的表现。
内部的子元素 不受外界的影响，外界的元素，也不受内部的元素的影响。各自独立生活在html这片空间下。
BFC触发条件：
【1】根元素，即HTML元素
【2】float的值不为none
【3】overflow的值不为visible
【4】display的值为inline-block、table-cell、table-caption
【5】position的值为absolute或fixed
BFC布局规则：
1.内部的Box会在垂直方向，一个接一个地放置（不设置浮动，设置浮动那肯定是 左右一行排列了）。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（正常的不设置浮动，两个块元素margin重叠,仅仅是垂直方向，左右不是这个样子的）
3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。（不设置浮动，不设置左边距，块级子元素，一律靠左竖直向下排列，内联子元素一律从左向右排列，想想，正常写代码，都是这样，设置左浮动的靠近父元素的左边，设置右浮动，靠近父元素的右边。）
4.BFC的区域不会与float box重叠。BFC区域的子元素不受外面的影响，外面的也不受BFC区域里面的影响（这个挺重要的，设置的浮动的元素，脱离了文档流，正常的相邻的元素会跑到它下面（靠左）。设置成BFC，自己独成一块，不会跑到它下面，而是保持洁身自好，自己依然占一块。）
6.计算BFC的高度时，浮动元素也参与计算（就是子元素设置浮动，脱离文档流，父元素高度塌陷，给父元素设置BFC，那么父元素高度就不会忽略浮动的子元素，从而高度就不会塌陷，这样理解，好像是BFC又把脱离文档流的元素，又拉回来了，但保持了浮动的特点。）
以上是关于子DIV滚动时父元素不受影响的主要内容，如果未能解决你的问题，请参考以下文章
css如何让子元素不受父级的父级的overflow:hidden影响
两个DIV，父元素相对定位没有设置高度，子元素绝对定位高度随内容变化，此无法撑开父DIV
子div设置了position: absolute; 但是父层是OVERFLOW-Y: auto; 如果父层出现了滚动条 子div就显示不全！