logo标签列表

使用浮动时，Div 折叠

htmlcss
10

我有以下HTML代码，我想在按钮和文本后面显示蓝色背景。不幸的是，使用下面的代码后，蓝色背景消失了。如果我删除按钮和文本的CSS，背景就会恢复。

我做错了什么？

谢谢！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style>


    #actions
    {
        background: blue;
    }

    #buttons
    {
        float: left;
    }

    #text 
    {
        float: right;
    }

    </style>
</head>
<body>

        <div id="actions">
            <div id="buttons">
                <input type="button" id="btnOne" value="Bla bla" />
                <input type="button" id="btnTwo" value="Bla bla bls" />
            </div>
            <div id="text">Bla bla bla</div>
        </div>

</body>
</html>
@Oriol - 这个问题是在2009年3月12日开放的。另一个问题是在2010年1月14日开放的。2010年1月14日开放的那个问题应该是重复的，而不是这个问题。 - Martin
1
我关闭了这个问题，而不是其他一个，因为另一个更“流行”（更多的投票、访问和收藏）。请注意，将问题关闭为重复并没有什么问题。 - Oriol
4个回答
12

要“清除”浮动。浮动元素会将它们从页面的正常块定位中移出，因此向右浮动的元素会打破父容器并使div崩溃。您可以清除它们，或者更简洁、聪明的方法是将'overflow: auto'添加到父容器中：

#actions
{
    background: blue; overflow: auto;
}

#buttons
{
    float: left;
    overflow: hidden;
}

#text 
{
    float: right;
    overflow: hidden;
}

由于"overflow: auto"在某些情况下会产生滚动条，因此我通常通过在子元素上指定'overflow: hidden'来明确防止这种情况。 在我的经验中，这种方法非常可靠。

2

试试这个：

    <div id="actions">
        <div id="buttons">
            <input type="button" id="btnOne" value="Bla bla" />
            <input type="button" id="btnTwo" value="Bla bla bls" />                
        </div>
        <div id="text">Bla bla bla</div>
        <div style="clear:both;height:1px;overflow:none;"></div>
    </div>

基本问题在于浮动元素不会对容器的计算高度产生影响。因此，当其他两个div被浮动时，div#actions没有任何高度。
抱歉，div标签放错位置了。 - Joel
0
一个非浮动元素如果只包含浮动元素，那么它将没有任何高度。为了强制最外层的元素向下延伸并包围浮动元素，它也必须被浮动。这个问题的简单解决方法是将 'actions' div 浮动起来- 这将按预期扩展背景。
在底部添加一个额外的元素来清除浮动元素是不必要的，也不符合语义，因此应该避免使用。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接