Почему floated div иногда наследует поле следующего элемента? - PullRequest
Новая
       3

Почему floated div иногда наследует поле следующего элемента?

2 голосов
/ 16 сентября 2009

Вместо того, чтобы пытаться объяснить это, я дам вам код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
    <title>weird</title>
    <style type="text/css">
        div#sidebar {
            background-color: yellow;
            float: left;
            width: 200px;
        }
    </style>
</head>

<body>
    <!-- insert something here to shift the top 
         of the sidebar by the top margin of the following div
    -->
    <div id="sidebar">
        background-color: yellow;<br />
        float: left; <br />            
        width: 200px;<br />
    </div>

    <div style="margin-top: 200px;">div - margin-top: 200px;</div>
</body>
</html>

Я тестирую это в FF и Chrome. Странно, но IE6 ведет себя так, что я считаю правильным. (?) Я уменьшил это до минимального воспроизводства, которое я могу. По сути, если вы поместите какой-либо текст рядом с комментарием, боковая панель переместится в верхнюю часть документа, как я ожидаю. В противном случае боковая панель, кажется, наследует верхнее поле следующего div.

Что происходит?

Ответы [ 2 ]

2 голосов
/ 16 сентября 2009

Это поведение, на мой взгляд, правильно. Плавающие блочные элементы нарисованы на том же верхнем поле. Они должны быть на одном уровне. Обходной путь должен был бы работать с отступом здесь.

0 голосов
/ 16 сентября 2009

Не уверен, почему браузер будет отображаться так. Я дал ему пару попыток и обнаружил, что Opera и FF оба делают это неправильно. Пока IE7 отрисовывает его правильно.

Мое знание CSS говорит о том, что div должен плавать влево, а второй div будет на 200px ниже вершины, в основном игнорируя, что первый div даже существует.

Добавляя clear: left ко второму div, давая вам 

<div style="margin-top: 200px; clear:both;">div with big top margin</div>

Это будет правильно отображаться в Opera и FF, однако теперь это неправильно в IE7. IE7 добавляет дополнительное пространство сейчас. Он отображается на 200 пикселей ниже поля, а не сверху.

...