您的位置：首页 > Web前端 > CSS

当子级元素浮动时让父级元素高度自适应的三种方法（以及多个子集元素同时存在浮动和绝对定位时的问题的解决办法）

2017-07-29 17:26 801 查看

例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 200px;
}
#parent {
border: 1px solid red;
}
#child {
float: left;
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
我是child
</div>
</div>
</body>
</html>

效果：

这就是我们经常遇到的问题了，即子级元素浮动的时候父级元素的高度就塌方了……，不过淡定，我们首先就可以想到为父级元素设置高度这种方法来解决的嘛，不过，我们要自适应！自适应！自适应！不要强迫让父级元素站起来，那么，这个时候我们有如下三种方法让父级元素自觉地站起来为子级元素撑起一片天空。

方法一：

这个方法比较常用，即为父级元素添加：

overflow: hidden;

这样就好了，就好了。

虽然这个方法可以解决高度自适应的问题，但是，如果这个时候该父级元素下面同时存在某个子集元素用的绝对定位，而且还定位到这个父级元素的范围外去了，就尴尬了，因为那个绝对定位的子元素（第一部分）找死也找不到了，哎，都是overflow: hidden; 害的，被隐藏了。

就是这样子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 100px;
}
#parent {
position: relative;
overflow: hidden;
margin-left: 100px;
border: 1px solid red;
text-align: right;
}
#child {
float: left;
}
#child2 {
position: absolute;
left: -80px;
background-color: #0088CC;
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
我是child
</div>
<div id="child2">
我是child2
</div>
</div>
</body>
</html>

这个问题我还是常遇到，不知道你是不是也这有过这样的经历。不过，总有解决的办法嘛。

方法二：

将上面代码中父级元素的 overflow: hidden; 改为：

float: left;

（right也可）

看吧：

就可以了。这样，父级元素的自适应问题解决了，子级元素的绝对定位问题也解决了。当然，由于父级元素使用浮动而导致的其父父级元素如果出现什么问题了，就需要大家根据实际情况灵活解决了。

这样看来，上面两种方法还是都有缺陷嘛，难道就没有一种能够比较美丽（真的要美丽啊）地解决这个问题的方法吗？有的，有的，我们继续：

方法三：

我们既不为父级元素设置 overflow: hidden; 也不设置 float: left;。我们为父级元素添加如下CSS：

#parent::after {
content: "";
display: block;
clear: both;
}

然后，“刷新”一点，哈哈，效果就出来了（同上），其中，display设置为 block或者inline-block都可。而且这方法也很是比较美丽的，然后，就喜欢上它了，哈哈。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 子元素浮动子元素绝对定位父元素高度自适应子元素完全显示 css

相关文章推荐

新的分享

章节导航