接上一條。
當你設置兩個子元素都是float的時候,子元素就脫離了普通文檔流,換句話說子元素已經浮動到父元素頭上了。那么這時候父元素就會出現一個問題,及父元素撐不開了(父元素找不到自己的該設置多高好了,這里是關鍵哦)。這就是題目中的父元素“塌陷具有零高度”的由來。如果你真正明白了上節最后為什么說了個“設置元素的clear屬性后,該元素將排在所有浮動元素的最下行”,那你就感受到這道題其實非常厲害和有意思。
回到題目中,父元素塌陷了是因為找不到自己的高度依據。那么就好解決了,要么設置高度,要么父元素也浮動起來。其中A選項提供了非常有意思的處理辦法,及在所有子元素最后加個0高度且clear浮動的元素
當你設置兩個子元素都是float的時候,子元素就脫離了普通文檔流,換句話說子元素已經浮動到父元素頭上了。那么這時候父元素就會出現一個問題,及父元素撐不開了(父元素找不到自己的該設置多高好了,這里是關鍵哦)。這就是題目中的父元素“塌陷具有零高度”的由來。如果你真正明白了上節最后為什么說了個“設置元素的clear屬性后,該元素將排在所有浮動元素的最下行”,那你就感受到這道題其實非常厲害和有意思。
回到題目中,父元素塌陷了是因為找不到自己的高度依據。那么就好解決了,要么設置高度,要么父元素也浮動起來。其中A選項提供了非常有意思的處理辦法,及在所有子元素最后加個0高度且clear浮動的元素
要明白老師在考你什么,題目是想考,例如:
```
/*HTML*/
<div class="father">
<div class="childA"></div>
<div class="childB"></div>
</div>
/*CSS*/
.childA {
width:100px;
height:100px;
}
.childB {
width:100px;
height:100px;
}
```
正常文檔流中,父元素div就算沒有設置高度和寬度,但是因為子元素有高寬,所以父元素會被子元素撐開;
```
/*HTML*/
<div class="father">
<div class="childA"></div>
<div class="childB"></div>
</div>
/*CSS*/
.childA {
width:100px;
height:100px;
}
.childB {
width:100px;
height:100px;
}
```
正常文檔流中,父元素div就算沒有設置高度和寬度,但是因為子元素有高寬,所以父元素會被子元素撐開;