Question

我在一个在父元素中并排有2个元素的网站上工作（我使用float:left和float:right来控制它们的位置），但父元素赢了＆＃ 39; t显示，除非我将其设置为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不会正常显示

1 个答案: