Html 无高度div的背景

我一次又一次地遇到同样的问题——一个带有浮动元素的流体div没有背景（因为它“没有高度”）。我试过使用：后选择器，甚至还试过假身高。但这些解决方案都不是优雅或一致的。我想知道处理这一问题的最佳、适应性最强、最灵活的方法。我正在寻找“这就是专业人士的做法”的解决方案，我可以反复使用，再也不用担心了

这里有一个非常简单的jsFiddle，您可以使用它。列表应具有橙色背景。

来自JSFIDLE的代码：

.wrapper {background-color: blue; width: 100%;}
.content {background-color: orange; width: 50%; margin: 0 auto;}
.bottom {background-color: green; width: 100%; clear: both;}
ul {margin: 0px 10px; padding: 0; float: left;}
li {list-style-type: none;}

<div class="wrapper">
    <div class="content">
        <ul>
            <li>list item</li>
            <li>list item</li>
            <li>list item</li>
            <li>list item</li>
            <li>list item</li>
        </ul>
        <ul>
            <li>list item</li>
            <li>list item</li>
            <li>list item</li>
            <li>list item</li>
            <li>list item</li>
        </ul>
    </div>
    <div class="bottom">
        Not much here
    </div>
</div>

.wrapper{背景色：蓝色；宽度：100%；}
.content{背景色：橙色；宽度：50%；边距：0自动；}
.bottom{背景色：绿色；宽度：100%；清晰：两者；}
ul{margin:0px 10px；padding:0；float:left；}
li{列表样式类型：无；}

列表项
列表项
列表项
列表项
列表项


列表项
列表项
列表项
列表项
列表项

这里不多

---

谢谢您的时间。

定义您的

。内容

溢出：隐藏

，如下所示

.content {
overflow:hidden;
}

========= 第二个选项

.content:after{content:"";
overflow:hidden;
    clear:both;
    display:table;
}

---

试试这个

演示

检查JS小提琴

希望这是你想要的

.content {
    background-color: orange;
    width:50%;
    margin: 0 auto;overflow:hidden;
}

尝试溢出：自动

.content {
    background-color: orange;
    width:50%;
    margin: 0 auto;
    overflow:auto;
  }

---

您可以使用

高度100%，溢出隐藏

.content {
    background-color: orange;
    width: 50%;
    margin: 0 auto;
    height: 100%;
    overflow: hidden;
}

试试这个链接。

你需要这样称呼

.content ul li{
    background-color:red;
}

---

希望这是你想要的…

正如大多数人所说，

溢出：隐藏是确保折叠元素达到所需高度的首选方法。这是：

以下属性/值组合将导致元素
建立新的块格式上下文：

float: left and float: right 
display: inline-block, display:
inline-table, display: table-cell and display: table-caption 
position: absolute and position: fixed 
overflow: hidden, overflow: auto and overflow: scroll 
  and their overflow-x and overflow-y counterparts.

不难理解为什么溢出：隐藏（或溢出：自动）
通常用于建立新的BFC：所有其他选项
通常有非常不受欢迎的副作用，或不受
Internet Explorer 7及以下版本

因此，从理论上讲，您可以使用上述任何一项来确保您的父元素知道其内部有其他元素（请记住，所有这些元素都有创建新BFC的副作用，而列出的属性的目的显然是完全不同的）

如果由于某种原因无法添加
溢出：hidden
，我经常使用的一个技巧是将父元素也浮动起来（例如，悬停在父元素之外的菜单）。在你的情况下，就像这样：

.content {
    background-color: orange;
    width:50%;
    margin: 0;
    float: left;
}

当然，这会破坏你的中心，在这种特殊情况下是不合适的。但是，如果您不想隐藏溢出，请记住这一点。然后还可以添加一个
宽度：100%
，以确保浮动父元素模仿块级结构：）
只需添加一个clearfix即可


}
之所以选择此作为答案，是因为它实际上有助于解释此技术的工作原理。
.content {
    background-color: orange;
    width:50%;
    margin: 0;
    float: left;
}

.clearfix {
display: block; clear:both;