高度没法扩展是什么意思
mainbody 高度没法扩展是什么意思，是受浮动什么影响啊？
2 回答
个人认为 @hao小苗 说的不完全对。
浮动仍然在文档流里面，占据着位置。
那么为什么mainbody高度没扩展（成子元素的最大高度呢）？要知道你没给子元素设置float的时候，子元素最大高度有多高，mainbody就有多高。不信你可以在w3school或者codepen.io或者其他的在线编辑器试下。
给两个子元素设置了浮动float之后，两个子元素的的确脱离了，但不是脱离文档流，也没有改变z次序（z-index），而是脱离了它们的父元素也就是mainbody，从而使得mainbody里面好像没有子元素，当然它的高度也就不会扩展成最大子元素高度和了。
如果你给mainbody设置一个固定高度（没有设置时就是auto），你会发现mainbody它出来了（overflow默认值就是visible）
<html>
<head>
<style type="text/css">
*{margin:0;padding:0;border:0px;}
.header{width:200px;background-color:#F00;}
.mainbody{width:200px;height:300px;background-color:#FF0;overflow:visible;}
.leftcol{width:100px;height:100px;float:left;background-color:#0F0;}
.rightcol{width:80px;height:250px;float:left;background-color:#00F;}
.footer{width:200px;background-color:#F0F;clear:both;}
</style>
</head>
<body>
<div class="header">header</div>
<div class="mainbody"><p>mainbody</p>
<div class="leftcol">leftcol</div>
<div class="rightcol">rightcol</div>
</div>
<div class="footer">footer</div>
</body>
</html>现在你把这个固定高度值去掉，把overflow设置为hidden，让它适应溢出元素：
.mainbody{width:200px;background-color:#FF0;overflow:hidden;}你会发现mainbody的高度会扩展为最大子元素高度和，也就是p的高度+rightcol的高度，下面紧挨着footer。
举报
0/150
提交
取消
