關于overflow與【包含塊】的概念在視頻的2分36秒,老師講的很清楚!不要老師吐槽老師,其實老師每個關鍵點都講了,在于你會不會去認真看!
2016-07-05
打錯了一個,是看其position是否是relative/absolute/flxed.慕課網的評論不能編輯很苦惱呀...
2016-07-05
@Wi同學理解的有問題呀,設置absolute以后的子元素,其定位以及overflow都是相對于其【包含塊】來定的,那么瀏覽器會如何尋找其【包含塊】呢?先找其父元素,父元素不是就再找父元素的父元素,以此類推直到找到【包含塊】或者根元素為止。那如何判斷一個元素是不是【包含塊】呢,看其position是否是relative/absolute/static。具體可以自己實驗一下。老師這個案例發現用了absolute之后overflow無效?解決的方法簡單,就是給其父元素手動加上position:relative另其形成一個包含塊。
2016-07-05
.lf{}
.mg{float:left}
.ri{background-color:#060;clear:both}
<div class="lf">
<img src="1.jpg" class="mg">
<div class="ri">
<img src="2.jpg"></div></div>
</div>
運行結果不一樣
.mg{float:left}
.ri{background-color:#060;clear:both}
<div class="lf">
<img src="1.jpg" class="mg">
<div class="ri">
<img src="2.jpg"></div></div>
</div>
運行結果不一樣
2016-06-29