======

Question

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

这是一个非常简单的jsFiddle，你可以玩。列表应该有橙色背景。 http://jsfiddle.net/y4Va3/

来自jsFiddle的代码：

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

感谢您的时间。

Answer 1

定义您的 .content overflow:hidden

.content {
overflow:hidden;
}

<强> Demo

======

选项no 2nd

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

<强> Demo2

Answer 2

试试这个Demo

http://jsfiddle.net/y4Va3/2/

.wrapper {
    background-color: blue;
    width: 100%;
}

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

.bottom {
    background-color: green;
    width: 100%;
    clear: both;
}
ul {
    margin: 0px 10px;
    padding: 0;
    float: left;
}

li {
    list-style-type: none;
}

Answer 3

检查JS小提琴

http://jsfiddle.net/arunberti/y4Va3/4/

希望这是你想要的

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

Answer 4

尝试overflow：auto;

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

Link-demo

Answer 5

您可以使用height 100%, overflow hidden

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

jsFiddle Link

Answer 6

试试此链接.. Demo

你需要像这样推荐..

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

希望这是你想要的......

Answer 7

正如大多数人所说，overflow: hidden是确保折叠元素达到所需高度的首选方法。这是a nice explanation：

以下属性/值组合将导致元素建立一个新的块格式化上下文：
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，目的是列出的属性显然是完全不同的。）

如果由于某种原因无法添加overflow: hidden（例如，悬停在父级之外的菜单上显示的菜单），我经常使用的技巧是浮动父元素。在你的情况下，像这样：

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

当然，这会打破你的中心，并不适合这种特殊情况。但是，如果您不想隐藏溢出，请记住这一点很好。然后，您还可以添加width: 100%以获得良好的度量，以确保您的浮动父元素模仿块级结构：）

Answer 8

你要做的就是添加一个clearfix

http://jsfiddle.net/cancerian73/yECkB/

.clearfix {
display: block; clear:both;

}

无高度divs的背景

8 个答案:

======