今天在测试一个鼠标滚动翻动页面时!发现了平常都没遇到的问题,那就是子级添加margin-top父级也下来了,以前写的时候一直都没有遇见这中自级回影响父级的代码很简单:

<div>
<div style=”background:#FFF; width:800px; height:80%; margin:auto; margin-top:50px;”></div>
</div>

<div class=”section section-1″>

<div style=”background:#FFF; width:800px; height:80%; margin:auto; margin-top:50px;”></div>

</div>

样式:

.section-wrap .section{ position:relative; width:100%; height:100%; background-position:center center; background-repeat:no-repeat;}

.section-wrap .section-1{ background-color:#0066a5}

就这样父级上面就会出现被顶下来的空开区,在经过查看,百度等手段后发现了下面这一段:

section 这个div加了一个overflow:hidden这个属性解决了这个问题。我们直到overflow:hidden这个属性的作用是隐藏溢出,给section 加上这个属性后,我们的content 的宽高自动的被隐藏掉了。另外,我们再做一个试验,将section 这个div的高度值删除后,我们发现,section 的高度自动的被content 这个div的高度值给撑开了。说到这里,我们再来理解一下“浮动”这个词的含义。我们原先的理解是,在一个平面上的浮动,但是通过这个试验,我们发现,这不仅仅是一个平面上的浮动,而是一个立体的浮动!也就是说,当content 这个div加上浮动这个属性的时候,在显示器的侧面,它已经脱离了section 这个div,也就是说,此时的content 的宽高是多少,对于已经脱离了的section 来说,都是不起作用的。当我们全面的理解了浮动这个词的含义的时候,我们就理解overflow:hidden这个属性中的解释,清除浮动是什么意思了。也就是说,当我们给section 这个div加上overflow:hidden这个属性的时候,其中的content 等等带浮动属性的div的在这个立体的浮动已经被清除了。这就是overflow:hidden这个属性清除浮动的准确含义。当我们没有给section 这个div设置高度的时候,content 这个div的高度,就会撑开section 这个div,而在另一个方面,我们要注意到的是,当我们给section 这个div加上一个高度值,那么无论content 这个div的高度是多少,section 这个高度都是我们设定的值。而当content 的高度超过section 的高度的时候,超出的部分就会被隐藏。这就是隐藏溢出的含义!


   

发表评论

邮箱地址不会被公开。 必填项已用*标注