两个子元素分别左右浮动,父元素高度为什是0?

两个子元素分别左右浮动,父元素高度为什是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>
阅读 3.4k
4 个回答

在 sec 后加一个 div,设置样式 clear: both; 或加 warp:after {clear: both}

  1. float使得元素脱离文档流, 所以父级高度是0...

  2. 解决方法, 清除浮动

.wrap:after {
  content: "";
  display: table;
  clear: both;
}

关键词:清除浮动

推荐问题
宣传栏