body 没有被撑开_为什么父div没有被撑开

正常情况下，如果父元素没有设置高度，子元素能够将其撑开。

但如果子元素浮动且没有清除浮动的话，在标准浏览器中，父元素不会被撑开。

代码实例如下：[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 闭合浮动即可。