Question

这将成为页面的页脚。我有一个背景颜色的div和2段与div相同的背景颜色。一段落在另一段左边。我看到背景颜色的唯一地方就在该段落的文字后面。

虽然我确实找到了一个关于表格的工作，但我想知道为什么它会以这种方式出现。为什么当Inspect元素另有说明时，div似乎没有背景颜色？

代码

<!DOCTYPE html>
    <html>
    <head>    
        <style>                                                                                           

            div.holder{
                position:absolute;
                margin-left:auto;
                margin-right:auto;
                width:65%;
            }            

             div.footer{
                position:relative;
                width: 100%;
                background-color: #00A2E8;
            }  

            div.footer p{
                background-color: #00A2E8;
                overflow: hidden
}
           </style>                                                                                                                                                                                                                                                         
    </head>
    <body >
    <div class="holder"> 
        <div class="footer" >
            <p style="float:left; ">
                gdfgdfgdfgdffgdf</br>
                dfgdfgdfgd  </br>   
                dgdfgdfg    ,</br>
                dfgdfgdf    </br>
                gdfgdfgf    </br>
                </br>
            </p>

            <p style="float:right;">
                <span>Phone:</span> 555555555</br>
                <span>FAX:</span> 55555555555</br>
                <span>Email:</span>info@example.com</br>
                <span>Website:</span>example.com</br>

        </div>
    </div>
    </body>
    </html>

Answer 1

您正在使用position: absolute;至div.holder并且如果您在div.footer上使用该声明（而不是relative定位），那么您需要background-color: #00A2E8; div.footer可以使用。

<强> JSFiddle DEMO

div.holder {
    position:absolute;
    margin-left:auto;
    margin-right:auto;
    width:65%;
}
div.footer {
    position:absolute;
    width: 100%;
    background-color: #00A2E8;
}
div.footer p {
    background-color: #00A2E8;
    overflow: hidden;
}

这是因为它建立了一个新的块格式化上下文。

绝对定位的元素，即位置为absolute或fixed的元素会建立新的 block formatting context （简称：BFC）

spec：

中记录了这一点

浮动，绝对定位的元素，阻挡容器（例如不阻塞的内联块，表格单元格和表格字幕盒子和带有“溢出”的块盒。除了＆＃39;可见＆＃39; （除了当该值已传播到视口时）建立新的阻止格式化其内容的上下文。

块格式化上下文是：

它是a的可视化CSS渲染的一部分   网页。它是块框布局的区域   并且浮子互相影响。
   - Mozilla MDN

规范states：

在块格式化上下文中，每个框的左外边缘都接触到包含块的左边缘（从右到左格式化，右边边缘触摸）。即使存在浮子也是如此

因此，创建BFC的容器将包含其中的所有浮动元素。

此外， MDN 澄清了这一点：

块格式化上下文包含元素内的所有内容创建它也不是在创建的后代元素内一个新的块格式化上下文。

您应该使用CSS clear属性，该属性指定元素是否可以位于其前面的浮动元素旁边，或者必须在它们下面向下移动（清除）。

当您将CSS clear属性应用于浮动元素时，它会将元素的边缘移动到所有相关浮点的边缘下方。 Mozilla MDN

<强> JSFiddle DEMO

您可以在结束<div style="clear: both;"></div>代码之前使用额外的div.footer。

Answer 2

您的.footer div不再包含<p>元素，因为它们已浮动。您必须使用.clearfix

这里有一个示例：

.clearfix:after {
     content: " "; /* Older browser do not support empty content */
     visibility: hidden;
     display: block;
     height: 0;
     clear: both;
}

将此内容添加到css后，您的页脚应如下所示

<div class="footer clearfix" >
     <!-- Your paragraphs -->
</div>

Answer 3

在

中

div.footer p{
    background-color: #00A2E8;
    overflow: hidden

您错过了结束}

将其更改为：

div.footer p{
    background-color: #00A2E8;
    overflow: hidden;
}

您还错过了＆＃39; float：right＆＃39;中的结束标记。段落标签

Answer 4

div 确实有背景，它只是没有大小，因为所有的孩子都是浮动的。

引用MDN float docs：

float CSS属性指定一个元素应该从正常流中取出并放在其容器的左侧或右侧

意味着浮动元素不再影响它的父级宽度或高度。

Answer 5

您需要将页脚的属性位置更改为固定。并且没有必要为元素提供背景颜色，因为它们包含在页脚块中。

div.footer{
    margin:0;
    position:fixed;
    width: 100%;
    background-color: #00A2E8;
}  

div.footer p {
    overflow: hidden;
}

希望它适合你：）

Answer 6

记住浮动元素不向父元素添加高度。移除浮子或增加高度。对于你不需要浮动的东西你可以使用绝对左右定位。但如果要使用浮动，请为页脚元素添加高度。见例子：

<!DOCTYPE html>
<html>
<head>    
    <style>                                                                                           
div.holder{
 position:absolute;
margin-left:auto;
margin-right:auto;
width:65%;

}            

 div.footer{
 position:relative;
width: 100%;
background-color: #00A2E8;

}  
div.footer p{
background-color: #00A2E8;
overflow: hidden
height:100px;
       </style>                                                                                                                                                                                                                                                         
</head>
<body >
<div class="holder"> 



<div class="footer" >

<p style="float:left; ">gdfgdfgdfgdffgdf</br>
dfgdfgdfgd  </br>   
dgdfgdfg    ,</br>
dfgdfgdf    </br>
gdfgdfgf    </br>
</br>
</p>

    <p style="float:right;">    <span>Phone:</span> 555555555</br>
            <span>FAX:</span> 55555555555</br>
            <span>Email:</span>info@example.com</br>
    <span>Website:</span>example.com</br>


</div>

</div>
</body>
</html>

div背景没有显示

6 个答案: