Контейнер 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>

В результате получается:

Я хочу получить такой результат:

Ответы

Ответ 1

Добавьте overflow: hidden; в селектор .container. Это заставит контейнер признать, что у него есть дети.

Ответ 2

Дайте контейнеру

overflow: auto

или

overflow: hidden

см. эту страницу на quirksmode.org для получения подробных сведений о проблеме.

Ответ 3

Быстрое исправление заключается в добавлении overflow: hidden к вашему .container.

Это не лучшее решение для каждого пользователя, это просто самое быстрое исправление. Лучшим решением будет внедрение и применение clearfix, поскольку у него нет проблем с печатью из-за переполнения.

Если вы используете overflow: auto или overflow: hidden, и пользователь пытается распечатать страницу, содержимое, которое не помещается на распечатанной странице, будет обрезано, потому что:

полосы прокрутки не печатаются
скрытый контент не отображается

Ответ 4

Один из вариантов заключается в том, чтобы положить <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>

Ответ 5

для внешнего div вы можете использовать clearfix css, объясненный здесь: http://www.positioniseverything.net/easyclearing.html

Ответ 6

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

Примените .clear к вашему родительскому элементу.

Ответ 7

Это может помочь "Очистка контейнера с плавающей точкой"