关于html的父元素div高度为0时子元素本该看不到而事实是子元素不受影响的原因

最新推荐文章于 2023-07-05 23:59:29 发布

hzxOnlineOk

最新推荐文章于 2023-07-05 23:59:29 发布

阅读量2.2k

点赞数 3

分类专栏： css3

本文链接：https://blog.csdn.net/hzxonlineok/article/details/103785820

版权

css3 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

我们这边以自己用js实现的select组件来说明：

我们会发现当.bm类名没有overflow:hidden;属性时，当我们点击input组件js对父元素类名为HMF-1的div时，动态改变该父元素的高度。当该父元素height为0时，子元素不受影响，仍旧屹立不倒。。。

如下图，框框没了，父元素高度为0：

这边没有用浮动，没有清除浮动一说，也没有所谓的脱离文档流一说。

我个人猜想，原本css3就是这么设计的。

解决办法当然就是为父元素加一个overflow:hidden属性，隐藏掉父元素容器范围外的内容。

测试代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>阿里西西特效演示页，DIV+CSS+JS仿下拉表单_ demo by js.alixixi.com</title>
<script type="text/javascript" >
function $$$$$(_sId){
 return document.getElementById(_sId);
}
function hide(_sId){
	console.log($$$$$(_sId).offsetHeight)
	$$$$$(_sId).style.height = $$$$$(_sId).offsetHeight == 136 ? 0 : 134 + 'px';
	console.log($$$$$(_sId).offsetHeight)
}
function pick(v) {
 document.getElementById('am').value = v;
 hide('HMF-1')
}
// 文字背景色
function bgcolor(id){
 document.getElementById(id).style.background="#F7FFFA";
 document.getElementById(id).style.color="#000";
}
function nocolor(id){
 document.getElementById(id).style.background="";
 document.getElementById(id).style.color="#788F72";
}

</script>
<style type="text/css">
* { margin:0px; padding:0px; }
body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
.cur { cursor:pointer; display:block; color:#788F72; width:71px; height:22px; line-height:22px; padding:0px 0px 0px 2px; }
.am { border: 0px; color:#788F72; cursor: pointer; background: url(http://www.alixixi.com/images/icon_list_on2.gif) no-repeat center center; border:1px #ccc solid; display:block; cursor:pointer; width:73px; height: 19px; margin:10px 0px 0px 10px; padding:3px 0px 0px 2px; }
.bm { border: 1px #999999 solid; width:73px; margin-left:10px;transition: 300ms ease-in;overflow:hidden;}
</style>
</head>
<body>
<form>
    <input onclick="hide('HMF-1')" type="text" value="请选择" id="am" class="am" />
    <div id="HMF-1"  class="bm" > 
		<span id="a1" onclick="pick('测试一')" onMouseOver="bgcolor('a1')" onMouseOut="nocolor('a1')" class="cur">测试一</span> 
		<span id="a2" onclick="pick('测试二')" onMouseOver="bgcolor('a2')" onMouseOut="nocolor('a2')" class="cur">测试二</span>
		<span id="a3" onclick="pick('测试三')" onMouseOver="bgcolor('a3')" onMouseOut="nocolor('a3')" class="cur">测试三</span> 
		<span id="a4" onclick="pick('测试四')" onMouseOver="bgcolor('a4')" onMouseOut="nocolor('a4')" class="cur">测试四</span> 
		<span id="a5" onclick="pick('测试五')" onMouseOver="bgcolor('a5')" onMouseOut="nocolor('a5')" class="cur">测试五</span>
		<span id="a6" onclick="pick('测试六')" onMouseOver="bgcolor('a6')" onMouseOut="nocolor('a6')" class="cur">测试六</span>
	</div>
</form>


</body>
</html>

相关的其他诸如浮动float问题，参考传送门：

https://blog.csdn.net/qq_36470686/article/details/82846924

https://blog.csdn.net/qq_36470686/article/details/82847688