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

Question

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

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

Run Code Online (Sandbox Code Playgroud)

结果是:

我想要一个这样的结果:
期望的结果

Answer 1

Jan*_*čič 37

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

如果与死亡爸爸一样容易!:) (19认同)

Answer 2

Pek*_*ica 24

给容器一个

overflow: auto

Run Code Online (Sandbox Code Playgroud)

要么

overflow: hidden

Run Code Online (Sandbox Code Playgroud)

有关该问题的详细信息,请参阅quirksmode.org上的此页面.

Answer 3

Cor*_*lou 11

一个速战速决是添加overflow: hidden到您的.container.

这不是最好的解决方案,只是最快的解决方案.您最好的解决方案是实现并应用clearfix,因为它不会因溢出而导致打印问题.

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

滚动条不打印
隐藏的内容不会显示

Answer 4

Dan*_*llo 5

一种选择是<div style="clear: both;"></div>在关闭容器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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	16 年，5 月前
查看次数：	16972 次
最近记录：	9 年前