Как заставить элемент растягиваться на ту же высоту, что и содержимое в нем?

Question

Высота заголовка div не будет растягиваться по вертикали, чтобы соответствовать содержимому в нем, если я не укажу для него высоту или если я не добавлю один из них:

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

перед закрывающим тегом div заголовка.

<style type="text/css">
#header {
    border: 1px solid green;
}
</style>

        <div id="header">
            <span id="logo"><img src="images/logo.png" /></span>
            <span class="fright">something will go here</span>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div><!-- header -->

Может ли это быть сделано без использования "очищающего div" или без придания заголовку div фиксированной высоты?

Answer 1

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

#header { overflow: auto; width: 100%; }

Он очистит ваши поплавки без дополнительного элемента

Answer 2

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

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

Тогда все, что вам нужно сделать, это дать div класс .clearfix.

Answer 3

Единственная причина, по которой клир будет иметь влияние, - это если вы используете поплавки. Можете ли вы опубликовать все свои CSS.