2

我有一个容器，我有 float:left 在它的子 div 里面。问题是，一旦我在子 div 上应用 float:left，我的父 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>

谁能告诉我如何解决这个问题？

4

2 回答 2

4

float elements do not have height unless you clear them below or give explicit height

Try this,

<!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>

OR use this hack of setting overflow of element.

 <!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>

于 2012-10-06T14:55:55.457 回答
0

啊，你打败了我……

你的内部（嵌套）div是浮动的，所以你的外部div正在崩溃。你有几个选择：

  1. 在浮动 div 中放置一个空cleardiv
  2. 将overflow:hidden样式应用于外部 div
  3. 删除内部 div，并浮动外部 div
于 2012-10-06T15:00:38.927 回答