两个子元素分别左右浮动,父元素高度为什是0?
代码如下:
父元素div.wrap
子元素div.fir,向左浮动,height:400px
子元素div.sec,向右浮动, height:600px
在F12调试下,父元素高度为0。
请问
1.这是为什么?
2.该怎么使父元素高度自适应子元素高度?
我知道一种解决办法,给父元素设置overflow。还有没有其它方法?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style>
.fir{
width: 300px;
height: 400px;
background-color: #666;
float: left;
display: inline;
overflow: auto;
}
.sec{
width: 400px;
height: 600px;
float: right;
background-color: #333;
color: #fff;
display: inline;
overflow: auto;
}
.wrap {
background-color: #eef;
margin:0 auto;
width:800px;
overflow: auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="fir"></div>
<div class="sec">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, quam, id, nesciunt cum aut vel unde odio est libero ratione quidem corporis consectetur inventore sapiente ut. Laboriosam, molestias obcaecati ipsum.</p>
</div>
</div>
</body>
</html>
在 sec 后加一个 div,设置样式 clear: both; 或加 warp:after {clear: both}