0

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

这是一个非常简单的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>

谢谢你的时间。

4

8 回答 8

1

像这样定义你的.content overflow:hidden 

.content {
overflow:hidden;
}

演示

=========

选项没有第二 

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

演示2

于 2013-08-01T05:29:42.323 回答
1

尝试这个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;
}
于 2013-08-01T05:30:34.000 回答
1

检查JS小提琴

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

希望这是你想要的

.content {
    background-color: orange;
    width:50%;
    margin: 0 auto;overflow:hidden;
}
于 2013-08-01T05:31:11.280 回答
1

尝试溢出：自动；

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

链接演示

于 2013-08-01T05:32:20.463 回答
1

您可以使用height 100%, overflow hidden

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

jsFiddle 链接

于 2013-08-01T05:32:27.980 回答
1

试试这个链接..演示

你需要像这样引用..

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

希望这是你想要的...

于 2013-08-01T10:50:57.427 回答
1

正如大多数人所说，overflow: hidden这是确保折叠元素获得所需高度的首选方法。这是一个很好的解释：

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

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%良好的措施，以确保您的浮动父元素模仿块级结构:)

于 2013-08-01T11:02:46.557 回答
1

你所要做的就是添加一个 clearfix

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

.clearfix {
display: block; clear:both;

}

于 2013-08-01T13:42:30.763 回答