父级div高度在向右浮动时小于子div高度

Question

当我将属性设置为float，然后父div的高度变得小于子div的高度时，我有以下html代码

 <div id="notificationBar"> 
    <div style="float:right;">
        {% if user.is_authenticated %}
            Hello {{ user }}
            <a href ="/accounts/logout/" style="margin-left:10px;"> Logout </a>
        {% else %}
            Hello Guest
            <a href ="/accounts/login/" style="margin-left:10px;"> Login </a>
        {% endif %}
    </div>
</div>

然而，当我删除下面给出的浮动权限属性时，父div会适应通常应该表现的子div。

<div id="notificationBar">  
    <div>
        {% if user.is_authenticated %}
            Hello {{ user }}
            <a href ="/accounts/logout/" style="margin-left:10px;"> Logout </a>
        {% else %}
            Hello Guest
            <a href ="/accounts/login/" style="margin-left:10px;"> Login </a>
        {% endif %}
    </div>
</div>

任何人都可以解释为什么会这样。 一个解决方案是设置父div的高度，但那不是一个灵活的解决方案。我希望根据子div的高度更改父div的高度。

Answer 1

如何清除浮动如下

<div id="notificationBar">
    <div style="float:right;">
        {% if user.is_authenticated %}
            Hello {{ user }}
            <a href ="/accounts/logout/" style="margin-left:10px;"> Logout </a>
        {% else %}
            Hello Guest
            <a href ="/accounts/login/" style="margin-left:10px;"> Login </a>
        {% endif %}
    </div>
    <div style="clear: both; height: 0;"></div>
</div>`

Answer 2

为什么要有div？为什么不简单地将文本设置为对齐？ Float没有固有的块高度。如果浮动内部元素，它们将不会将partent div保留为块。你可以使用float：right; display：inline-block;或....

我会做什么......

<div id="notificationBar" style="text-align: right;"> 
    {% if user.is_authenticated %}
        Hello {{ user }}
        <a href ="/accounts/logout/" style="margin-left:10px;"> Logout </a>
    {% else %}
        Hello Guest
        <a href ="/accounts/login/" style="margin-left:10px;"> Login </a>
    {% endif %}
</div>

或使用段落而不是div。

当然，可能还有其他因素没有分享。

Answer 3

添加css：

#notificationBar { overflow:auto; }