Question

我有以下HTML，我想在按钮和文本后面显示蓝色背景。不幸的是，使用以下代码，蓝色背景消失。如果我删除了ids按钮和文本的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>

Answer 1

你必须“清除”你的花车。浮动元素将它们从页面的正常块定位中取出，因此右侧浮动的元素会突破父容器，从而折叠div。您可以清除它们，或者更简洁明智的方法是将'overflow：auto'添加到父容器中：

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

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

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

由于“overflow：auto”可以在某些情况下产生滚动条，我通常会通过在children元素上指定'overflow：hidden'来明确地阻止它。根据我的经验，这是可靠的。

Answer 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没有任何高度。

Answer 3

有关浮动和清除它们的更多信息：http://www.dave-woods.co.uk/index.php/float-and-clear-a-comparison-of-css-clearing-techniques/

Answer 4

如果非浮动元素仅包含浮动元素，则它将不具有任何高度。为了迫使最外面的元件向下伸展并围绕浮动元件，它也必须浮动。这个问题的简单答案是浮动“actions”div-这将按预期扩展背景。

在底部添加一个额外的元素只是为了清除浮动的元素是不必要的，而不是语义的，所以不应该这样做。

使用浮动时Div崩溃

4 个答案: