Firefox在浮动元素时删除背景

Question

我的css中有一个包装器div，它覆盖了我的大多数视口。我有一个背景颜色，在div里面，我还有两个div分别左右浮动。

当我使用Chrome时，我可以完美地看到背景代码，但是当我使用Firefox时，看不到背景颜色。以下是一些截图：

在Chrome上

在Firefox上

这是代码。 我的HTML：

<div id="wrapper">
<div id="asd"></div>
<div id="perejavi">
    <p id="pere">Pere</p>
    <p id="and">&</p>
    <p id="javi">Javi</p>
</div>
<div id="web">
    <p id="programmer">Programación</p>
    <p id="programmer2">diseño web</p>
</div>

我的CSS：

#wrapper {
    background-color: #00CE6B;
    height: auto;
    min-height: 93%;
    width: 85%;
    color: #ffffff;
    margin: 0 auto;
}

#perejavi {
    margin: 0;
    font-size: 9.1em;
    float: left;
    padding-bottom: 0;
    height: 60%;
    width: 50%;
}

#web {
    margin: 0;
    width: 50%;
    height: 60%;
    float: right;
}

为什么会这样？希望你能帮忙！;）

Answer 1

Floats从普通文档流中删除HTML元素，可能会导致此类问题。有几种方法可以处理花车，但我只是按照我喜欢的方式给你：

在你的css中：

.clearfix:after {
   visibility:hidden;
    display:block;
    font-size:0;
    content:" ";
    clear:both;
    height:0;
}

然后在你的HTML中：

<div id="wrapper" class="clearfix>

这会创建一个伪元素作为.clearfix div的最后一个子元素，.clearfix div中包含clears浮动元素

注意：此外，您似乎错过了包装器div的结束</div>。确保在

中添加

进一步阅读花车及其带来的陌生感： http://css-tricks.com/all-about-floats/