正常情况下,如果父元素没有设置高度,子元素能够将其撑开。
但如果子元素浮动且没有清除浮动的话,在标准浏览器中,父元素不会被撑开。
代码实例如下:[HTML] 纯文本查看 复制代码运行代码
蚂蚁部落.parent {
width: 200px;
border: 1px solid red;
}
.child {
float: left;
height: 80px;
width: 100px;
background-color: green;
}
代码运行效果截图如下:
可以看到,父元素的高度并没有被撑开。
这是由于子元素处于浮动状态,已经脱离文档流。
代码修改如下:[HTML] 纯文本查看 复制代码运行代码
蚂蚁部落.parent {
width: 200px;
border: 1px solid red;
overflow: hidden;
}
.child {
float: left;
height: 80px;
width: 100px;
background-color: green;
}
代码运行效果截图如下:
上述代码在父元素上添加 overflow: hidden 闭合浮动即可。