除非设置为 position:absolute，否则父项 div 将无法正确显示

Question

我在一个网站上工作，该网站在一个父元素内并排放置了 2 个元素（我使用 float:left 和 float:right 来控制它们的位置），但父元素不会'除非我将其设置为 position:absolute，否则不会出现。我不能那样做，因为我在网站底部制作了一个页脚，而父元素的高度是可变的。

jsfiddle

HTML

<div id="wrapper">
    <div id="div1">div 1</div>
    <div id="div2">div 2</div>
</div>
<div class="clear"></div>
<div id="footer">this is a footer</div>

CSS:

#wrapper {
    background:blue;
    /* setting to position:absolute will make blue bg show up,
    but footer disappear */
    position:relative;
    width:150px;
}
.clear {
    clear:both;
}
#div1 {
    float:left;
    display:inline;
    padding:20px;
}
#div2 {
    float:right;
    display:inline;
    padding:20px;
}

我是不是漏掉了什么？？

Answer 1

当元素浮动时，它们 are essentially removed from the normal flow。因此，如果一个元素只包含浮动元素（如您的情况），则父元素将自行折叠并具有 0.

的高度

解决此问题的常用方法是 use a clearfix。

Example Here

#wrapper:after {
    content: '';
    clear: both;
    display: table;
}

或..

Example Here

#wrapper {
    background: blue;
    position: relative;
    width: 150px;
    overflow: auto;
}

或者，您也可以在元素上设置明确的高度。

我刚刚注意到您的示例中有一个 .clear 元素 (<div class="clear"></div>)。要使其工作，它必须位于具有浮动子元素的元素的内部：

Example Here

<div id="wrapper">
    <div id="div1">div 1</div>
    <div id="div2">div 2</div>
    <div class="clear"></div>
</div>

除非设置为 position:absolute，否则父项 div 将无法正确显示

Parent div won't display properly unless set to position:absolute

html

css

position