div 高度 0px 但里面有图片？答案

【问题标题】：Div height 0px but with images inside?div 高度 0px 但里面有图片？
【发布时间】：2019-04-28 21:56:01
【问题描述】：

我已经查看了类似的问题并尝试删除 position 属性，但不幸的是没有用。

我有一个容器，里面有 2 个 div，这两个 div 都包含一个图像。图像显示正确，但整个容器的高度为 0px。这是打开开发者控制台的图像：https://gyazo.com/277d635619eb80d2d3f63a1c28c80314 这发生在尝试使图像响应宽度：100%；和高度：自动；

    #landing-images {
        width: 100%;
        height: auto;
        margin-top: 10%;
        margin-bottom: 5%;
        border: solid 2px black;
    }
    
    .leftLanding {
        /*position: relative;*/
        width: 80%;
        float: left;
    }
    
    .rightLanding {
        /*position: relative;*/
        width: 80%;
        float: right;
    }
    
    .landingImage {
        width: 100%;
        height: auto;
    }

 <div id="landing-images">
     <div class="leftLanding">
         <img class="landingImage" src="http://www.hlgjyl888.com/data/wallpapers/57/WDF_1035782.png">
     </div>
     <div class="rightLanding">
         <img class="landingImage" src="http://www.hlgjyl888.com/data/wallpapers/57/WDF_1035782.png">
     </div>
 </div>

【问题讨论】：

那么你的问题是什么？
@karimyafi 如果高度是自动的，为什么它不等于其内容的高度？或者“如何使高度等于其内容”？
隐藏溢出:)
溢出：隐藏
浮动子元素会从文档流中删除父元素的期望行为，并且父元素将折叠，因此您只需要添加溢出属性，如我在回答中所述。

标签： html css

【解决方案1】：

你只需要添加。

overflow:auto; 到 #landing-images。

所以，你的 CSS 会像，

#landing-images {
    width: 100%;
    height: auto;
    overflow:auto;
    margin-top: 10%;
    margin-bottom: 5%;
    border: solid 2px black;
}

因为浮动子元素会将其从文档流中移除，并且父元素会折叠。通过添加溢出规则，恢复所需的行为。

【讨论】：

谢谢@Chirag 我会在 3 分钟内接受。顺便说一句，你知道如何删除图像之间的空白吗？这是一张图片，您可以在图片的上方和下方看到它gyazo.com/a0920678f425359edfc28d5fa61a0fe2
@EthanBristow 是执行我的建议后的图像吗？并且所有其他 CSS 都是正确的。？
是的，没有其他变化
将display: block; 添加到landingImage，因为默认情况下图像是内联元素。 display:block; 消除了差距。

【解决方案2】：

问题是浮动属性，使用 display: block 和 margin 代替。

#landing-images {
    width: 100%;
    height: auto;
    margin-top: 10%;
    margin-bottom: 5%;
    border: solid 2px black;
    position:relative;
}

.leftLanding {
    position: relative;
    width: 80%;
    display:block;
    margin-right:auto;
}

.rightLanding {
    position: relative;
    width: 80%;
    margin-left:auto;
}

.landingImage {
    width: 100%;
    height: auto;
}

<div id="landing-images">
     <div class="leftLanding">
         <img class="landingImage" src="http://cdn.playbuzz.com/cdn/d2b06305-f201-4127-8eb7-7410bcc0de02/2d6c2415-2b8c-430c-87a4-c516409d8488.jpg">
     </div>
     <div class="rightLanding">
         <img class="landingImage" src="http://www.nationalgeographic.com/content/dam/animals/pictures/mammals/g/gray-wolf/gray-wolf_01.ngsversion.1484679603276.JPG">
     </div>
 </div>

【讨论】：

【解决方案3】：

只要里面有浮动元素，就必须清除包装器。

    #landing-images {
        width: 100%;
        height: auto;
        margin-top: 10%;
        margin-bottom: 5%;
        border: solid 2px black;
    }
    
    .leftLanding {
        /*position: relative;*/
        width: 80%;
        float: left;
    }
    
    .rightLanding {
        /*position: relative;*/
        width: 80%;
        float: right;
    }
    
    .landingImage {
        width: 100%;
        height: auto;
    }
    .clearfix::after {
        visibility: hidden;
        display: block;
        content: "";
        clear: both;
        height: 0;
    }

 <div id="landing-images" class="clearfix">
     <div class="leftLanding">
         <img class="landingImage" src="http://www.hlgjyl888.com/data/wallpapers/57/WDF_1035782.png">
     </div>
     <div class="rightLanding">
         <img class="landingImage" src="http://www.hlgjyl888.com/data/wallpapers/57/WDF_1035782.png">
     </div>
 </div>

我总是使用具有以下样式的标准 clearfix 类：

    .clearfix::after {
        visibility: hidden;
        display: block;
        content: "";
        clear: both;
        height: 0;
    }

所以，在你的全局 CSS 中总是有这样一个类。并将这个类添加到其中包含浮动元素的所有包装器中。

阅读更多关于 clearfix 概念的信息：

https://css-tricks.com/snippets/css/clear-fix/

【讨论】：