Вопросы Теги

Div с относительной позицией над div float

Я не понимаю, почему div с плавающей точкой вправо или влево не находится выше div с относительной позицией или определяется цветом фона, когда последний объявляется после.

Вот html: 

<html>
<body>
    <div class="container">
        Main container <br/><br/>

        <div class="header">This is the header</div>
        <div class="text-right">Right text</div>
        <div class="footer">This is the footer</div>
    </div>
</body>

А вот css: 

.header {
    background-color:blue;
    border: solid;
    color: white;
    border-color:black;
    height: 100px;
}

.text-right{
    float: right;   
    border: solid;
    background-color: green;
}

.container{
    padding: 10px;  
    border: solid;
}

.footer{
    padding-top: 50px;
    border: solid;
    background-color: yellow;
    position: relative;
}

Я знаю, что могу использовать правило .clear: both, чтобы исправить эту проблему, но мой главный вопрос: почему, когда я устанавливаю цвет фона или позиция или оба в правиле .footer, div с плавающей запятой находится под нижним колонтитулом?

Большое спасибо!

5
задан mskfisher 24 May 2012 в 19:19
поделиться