Question

我的代码。（jsfiddle）为什么这部分代码没有运行？

header{background-color: #2bd5ec;}

我想为标头标签添加背景颜色。我需要做什么？

Answer 1

这里的问题是，由于header中的元素是浮动的，因此它们被认为与您的标题不同，因此它不会调整大小以适应它们。

解决此问题的一种方法是将<div style = "clear: both;"></div>附加到header;小演示：little link。

您也可以将overflow: hidden;添加到header：another little link，或float，yet another little link。

Answer 2

您可以为标题设置高度。例如：

header{background-color: red; height:100px;}

你可以像这样使用“清除”：

 <header>
     <div id="info">
         <h1>Oyunn.in</h1>
     </div>
     <div id="categories">
         <p>Barbie - Benten - Senten</p>
     </div>
     <br clear="all"/>
</header>

和css：

header{background-color: #2bd5ec;}
#info{float: left;}
#info h1{font-size: 100%;margin: 0;}
#categories{float: right;}
#categories p{margin:0;}

Answer 3

添加

header{background-color: #2bd5ec;width:100%; height:30px;}

背景属性通常需要div的维度

Answer 4

使用overflow:hidden

header{background-color: #2bd5ec; overflow:hidden;}

overflow CSS属性指定是否剪辑内容，渲染滚动条或显示块级元素的溢出内容。

使用值不同于visible的{{3}}属性（默认值）将创建新的块格式化上下文。这在技术上是必要的，好像浮动将与滚动元素相交，它将强制将可滚动元素的内容重新包裹在侵入的浮动周围。在每个滚动步骤之后将发生重新缠绕，并且将导致非常慢的滚动体验。请注意，通过以编程方式将scrollTop设置为相关的HTML元素，即使溢出具有隐藏值，元素也可能需要滚动。

overflow声明告诉浏览器如何处理不适合框的内容。这假设盒子有一个高度：如果没有，它就会变得尽可能高地包含它的内容，而溢出声明是无用的。

overflow

Answer 5

实际上你没有清除你的孩子花车，所以每当我们使用浮动时，我们应该清除花车，我们可以在我们的父div中给overflow: hidden;清除子浮动div。

header {
    background-color: #2BD5EC;
    overflow: hidden;
}

参见演示： - http://jsfiddle.net/vE8rd/17/

为什么background属性没有运行？

5 个答案: