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;
}
效果图如下: