overflow:hidden 属性详细解释解决height为0
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="00f5-6390-a117-5b94 aBox">
<div class="6390-a117-5b94-bd1b 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设定的浮动属性还是存在。
相关文章
第一次打开网站点击任意跳转指定网址
首先设置一个div层 以及css <div id="firstMask" style="display: none;"></div> <style type="tex...
CSS去除input和textarea点击选中框
1、去除chrome等浏览器默认发光边框 input:focus, textarea:focus { outline: none; } 这样textarea在选中的时候，文字会有点移动，解...
Copyright Your WebSite.Some Rights Reserved.
免责声明:本站所发布的任何网站，全部来源于互联网，版权争议与本站无关。仅供技术交流，如有侵权或不合适，请联系本人进行删除。不允许做任何非法用途！