Question

我有一个容器，我有浮动：留在它的子div中。问题是我一应用浮动：左边的孩子div我的父div的背景完全丢失。

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>

        <div style="background: #CCC; width:100%; position:relative;">
            <div style="float:left;">
                This is some text
            </div>
        </div>
    </body>
</html>

有人可以告诉我该如何解决这个问题？

Answer 1

float个元素没有height，除非您在下面清除它们或明确height

试试这个，

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>

        <div style="background: #CCC; width:100%; height:50px;position:relative;">
            <div style="float:left;">
                This is some text
            </div>
        </div>
    </body>
</html>

OR

 <!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div style="background: #CCC; width:100%; position:relative;">
            <div style="float:left;">
                This is some text
            </div>
            <div style='clear:left'></div>
        </div>
        
    </body>
</html>

或者使用这个设置overflow元素的黑客。

 <!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div style="background: #CCC; width:100%; overflow:hidden;position:relative;">
            <div style="float:left;">
                This is some text
            </div> 
        </div>
        
    </body>
</html>

Answer 2

啊，你打败了我......

您的内部（嵌套）div已浮动，因此您的外部div正在崩溃。您有几个选择：

在浮动div

clear

将overflow:hidden样式应用于外部div
删除内部div，并浮动外部div

为什么我不能在div上看到我的背景

2 个答案: