接上一条。
当你设置两个子元素都是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就算没有设置高度和宽度,但是因为子元素有高宽,所以父元素会被子元素撑开;