Question

<html>

<head>

<style type="text/css">

  .container {
      width: 900px;
      border: 2px solid #333333;
      padding-top: 30px;
      padding-bottom: 30px;
  }

  .container_left {
      border: 2px solid #FF00FF;
      width: 650px;
      float: left;
  }

  .container_right {
      border: 2px solid #0000FF;
      width: 225px;
      float: right;
  }

</style>
</head>

<body>

    <div class="container">
        <div class="container_left">
        <div>LEFT CONTAINER</div>
        <div>LEFT CONTAINER</div>
        <div>LEFT CONTAINER</div>
        </div>

        <div class="container_right">
        <div>RIGHT CONTAINER</div>
        <div>RIGHT CONTAINER</div>
        <div>RIGHT CONTAINER</div>
        </div>
    </div>

</body>
</html>

结果是：
result

我想要一个这样的结果：
desired result

Answer 1

将overflow: hidden;添加到.container选择器。这将迫使容器承认它有孩子。

Answer 2

给容器一个

overflow: auto

或

overflow: hidden

有关此问题的详情，请参阅this page on quirksmode.org。

Answer 3

快速修复是将overflow: hidden添加到您的.container。

这不是最好的解决方案，只是最快的修复。您最好的解决方案是实施和应用clearfix，因为它不会因为溢出而导致打印问题。

如果您使用overflow: auto或overflow: hidden并且用户尝试打印该页面，则会裁剪不适合打印页面的内容，因为：

滚动条不打印
隐藏内容无法显示

Answer 4

一种选择是在关闭容器div之前放入<div style="clear: both;"></div>。

<div class="container">

    <div class="container_left">
    <div>LEFT CONTAINER</div>
    <div>LEFT CONTAINER</div>
    <div>LEFT CONTAINER</div>
    </div>

    <div class="container_right">
    <div>RIGHT CONTAINER</div>
    <div>RIGHT CONTAINER</div>
    <div>RIGHT CONTAINER</div>
    </div>

    <div style="clear: both;"></div>

</div>

Answer 5

到外部div你可能想要使用clearfix css，在这里解释：http://www.positioniseverything.net/easyclearing.html

Answer 6

.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
* html .clear { height: 1%; }
*:first-child+html .clear { min-height: 1px; }

将.clear应用于您的父元素。

Answer 7

这可能有所帮助"Clearing a float container"

CSS容器不会伸展以容纳浮动

7 个答案: