Float引起div自适应高度无效的解决办法

来源：互联网发布：东方闻樱知乎编辑：程序博客网时间：2024/05/22 03:15

Float引起div自适应高度无效的解决办法。

一、当子元素在正常的文档流中时

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三生草</title>
<style type="text/css">
#ss{
border:2px solid yellow;
width:400px;
}
#sr{
background:red;
width:200px;
height:100px;
margin:0 auto;
}
</style>
</head>
<body>
<div id="ss">
<div id="sr"></div>
</div>
</body>
</html>

上面的父元素的高度随着子元素的高度变大而变大。当子元素在正常的文档流中。所以子元素能够将父元素撑开。即父元素的高度可根据子元素的高度自适应。效果图如下：

二、当子元素加上浮动时

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三生草</title>
<style type="text/css">
#ss{
border:2px solid yellow;
width:400px;
}
#sr{
background:red;
width:200px;
float:left;
height:100px;
margin:0 auto;
}
</style>
</head>
<body>
<div id="ss">
<div id="sr"></div>
</div>
</body>
</html>

上面的父元素没有被子元素撑开，即父元素没有根据子元素自动调节高度，这是因为子元素float属性设置为left，从而脱离了文档流。效果图如下：

三、Float引起div自适应高度解决办法。

方法一：如果父元素没有设置高度，那么我们可以在父元素中添加：“overflow:hidden;”来清除浮动，即可通过浮动元素撑开父元素。
#ss{
border:2px solid yellow;
width:400px;
overflow:hidden;
}
#sr{
background:red;
width:200px;
float:left;
height:100px;
margin:0 auto;
}

效果图如下：

方法二：如果父元素固定了高度，但是还要实现高度的自适应。那么可以添加如下代码即可：
#ss{
border:2px solid yellow;
width:400px;
height:200px;
min-height:200px;
height:auto!important;
}
#sr{
background:red;
width:200px;
float:left;
height:100px;
margin:0 auto;
}

效果图如下：

0 0