課程
/前端開發
/HTML/CSS
/網頁布局基礎
mainbody 高度沒法擴展是什么意思，是受浮動什么影響?。?/p>
2016-06-18
源自：網頁布局基礎 3-3
正在回答
個人認為 @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。
黑色旋風
mainbody的高度可以擴展，如果設置了mainbody高度才不能擴展
舉報
讓你精通CSS中三大定位機制，徹底掌握網頁布局的相關知識
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-06-19
個人認為 @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。
2016-06-19
mainbody的高度可以擴展，如果設置了mainbody高度才不能擴展