*{margin:0; padding:0;}
#wrap{width:970px; margin:0 auto;}
#mainbody{position:relative; margin-top:15px;}
#left{float:left;width:110px;border:1px solid gray; }
#mid{position:absolute;left:123px;width:650px;border:1px solid #999;}
#right{position:absolute;left:790px;top:0px;border:1px solid #999;}
#wrap{width:970px; margin:0 auto;}
#mainbody{position:relative; margin-top:15px;}
#left{float:left;width:110px;border:1px solid gray; }
#mid{position:absolute;left:123px;width:650px;border:1px solid #999;}
#right{position:absolute;left:790px;top:0px;border:1px solid #999;}
2016-12-27
最新回答 / weixin_慕函數2472239
后面的p標簽有內容為啥要被蓋住,前面的box1 box2有了內容也不會被蓋住。設置了浮動屬性沒設置寬度,盒子的寬度是隨盒子的內容自適應的
2016-12-27
第二種就是給mainbody設置overflow:hidden并設置寬度, overflow:hidden屬性相當于是讓父級緊貼內容,這樣即可緊貼其對象內內容(包括使用float的div盒子),從而實現了清除浮動。
缺點是不能和position配合使用,因為超出的尺寸的會被隱藏。
所以推薦在沒有position布局和float布局混合使用的情況下使用。
缺點是不能和position配合使用,因為超出的尺寸的會被隱藏。
所以推薦在沒有position布局和float布局混合使用的情況下使用。
清除浮動除了視頻講解中兩種方法以外還有很多方法(視頻講的還是很淺的)
第一種clear:both,清除臨近的元素的浮動影響,可以通過在mainbody中加一個空div,給空div設置clearboth。
<div id="mainbody">
<div class="left"></div>
<div class="right"></div>
<div class="clearfloat"></div>
</div>
css中加代碼:
.clearfloat{clear:both;}
缺點是需要加一個空div,會造成結構混亂,所以不推薦。
第一種clear:both,清除臨近的元素的浮動影響,可以通過在mainbody中加一個空div,給空div設置clearboth。
<div id="mainbody">
<div class="left"></div>
<div class="right"></div>
<div class="clearfloat"></div>
</div>
css中加代碼:
.clearfloat{clear:both;}
缺點是需要加一個空div,會造成結構混亂,所以不推薦。
使用 overflow 默認值(visible)以外的值將創建一個新的 塊級格式化上下文. 這在技術層面上是必須的——如果一個浮動元素和滾動條相交,它會強制(重新)包圍內容元素。 (個人理解) 因為left與right漂浮于mainbody上方,導致left與right會超出mainbody塊所能包含的區域,為了讓mainbody塊能夠包裹住left和right,會強制性創建一個區塊將left與right包裹住,所以mainbody的高度會包裹住left與right。
2016-12-24