overflow:hidden 属性详细解释解决height为0

【摘要】 overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解。我们下面来详细阐释一下。......

overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解。我们下面来详细阐释一下。

<html> <head> <title></title> <style> .aBox{ background-color:blue; } .bBox{ background-color:yellow; float:left; height:400px; width:400px; } </style> </head> <body> <div class="aBox"> <div class="bBox"></div> </div> </body></html>

此处class为aBox的div高度没有被撑开,变为了0

此处只对解决办法overflow:hidden作出详细说明。

我们对父元素加上overflow:hidden属性

我们发现class为aBox的div恢复了正常。


解释:


我们知道overflow:hidden这个属性的作用是隐藏溢出,若aBox的高度小于bBox,溢出的bBox高度会直接隐藏。是隐藏,并不是直接截除了。


另外,我们发现,在上面实验中,使用了overflow属性后,aBox的高度自动的被bBox 这个div的高度值给撑开了。


当aBox不使用overflow属性,bBox这个div又加上浮动这个属性的时候,在显示器的侧面,它已经脱离了aBox这个div,也就是说,此时的bBox的宽高是多少,对于已经脱离了的aBox来说,都是不起作用的。而当我们给aBox这个div加上overflow:hidden这个属性的时候,其中的bBox 等等带浮动属性的div对aBox的影响已经被清除了。这就是overflow:hidden这个属性清除浮动的准确含义。当我们没有给aBox这个div设置高度的时候,bBox这个div的高度,就会撑开aBox这个div。


注意:这里清除的只是float属性对aBox的影响,但子div设定的浮动属性还是存在。


本文标签: CSS
版权声明:《 overflow:hidden 属性详细解释解决height为0 》为作者 思源哥哥原创文章,转载请注明原文地址!
免责声明:思源资源网提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请邮件(y@isiyuan.net)与我们联系处理。
分享到:
打赏
评论 (2)
  • 221.192.179.*

    加油o