html – 使用float [div]时Div崩溃

参见英文答案 > Floating elements within a div,floats outside of div. Why?9个
我有以下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>

解决方法

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

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

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

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

由于“overflow：auto”可以在某些情况下生成滚动条,因此我通常通过在children元素上指定’overflow：hidden’来明确地阻止它.这在我的经验中可靠地工作.

html – 使用float [div]时Div崩溃

解决方法

相关文章