Как получить контейнер Div с автоматической высотой и плавающими div внутри него?

Question

У меня есть следующий HTML

<style type="text/css">
<!--
.msg_ok{
    font-family: "Trebuchet MS";
    font-weight: bold;
    font-size: 16px;
    margin:0 auto;
    padding:10px;
    width:500px;
    height:auto;
    display:block;
}
.msg_ok{
    background-color:#DCFFB9;
    border:#003300 1px solid;
    color:#003500;
}
-->
</style>

      <div class="msg_ok" style="height:auto;">

        <div style="display:block;float:left;width:350px; height:auto;">
          <p>line 1<br>
          line2<br>
          line3<br>
          line4<br>
          line5<br>
          </p>
        </div>
        <div style="display:block;float:left;width:100px; height:auto;">
        <a href="#">Print</a>
        </div>

      </div>

И я получаю этот результат

однако как я могу получить результат, подобный следующему, контейнер div с автоматической высотой, который соответствует его размеру с плавающими div внутри?

Заранее спасибо

Answer 1

добавить эти

.msg_ok{
    overflow:hidden;
    zoom:1;
}

и удалить height:auto, это бесполезно, поскольку высота всегда автоматическая (по умолчанию).проблема, с которой вы сталкиваетесь, как содержать числа с плавающей запятой

Answer 2

Я думаю, что вы ищете "хак" с четким исправлением, чтобы родитель не потерял свою высоту, когда он содержит плавающие элементы, верно?

Добавьте <div class="clear">&nbsp;</div> после последнего плавающего div, а затем используйте следующий CSS:

.clear {
   float: none;
   clear: both;
   height: 0;
}

Answer 3

Попробуйте это

Jsfiddle height auto

Сделать свойство отображения "inline-block" для класса msg_ok

Answer 4

Вам нужно добавить элемент после плавающих элементов, который очищает поплавки. В целом:

<br style="clear:both" />

Answer 5

Лучший метод - использовать clearfix. Перейдите по этой ссылке - http://css -tricks.com / snippets / css / clear-fix /