div не будет плавать рядом с предыдущим не плавающим div

Question

Так что я возился с CSS и плыл на днях и наткнулся на странное поведение (честно говоря, я удивлен, что раньше с этим не сталкивался).Я был озадачен причиной этого (а также тем, почему я еще не знал ...).

Если у вас есть div (назовем его Боб), и вы попытаетесь отпустить его следующимдля другого div (Джимми), это работает, только если

1. Джимми тоже плавающий
2. Джимми приходит после Боба

Так что если у нас есть:

<div class="container">
    <div id="one">Main Content 1</div>
    <div id="two">Sidebar 1</div>
</div>

с

.container { 
    overflow:hidden; /* this essentially clears the floats. You could remove it and add a clearfloat div instead */
    margin-bottom:10px;
}
#one {
    background-color:red;
    margin-right:50px;
}
#two {
    width:50px;
    float:right;
    background-color:blue;
}

получаем; но если мы просто поменяем #one и #two, сохранив тот же CSS:

<div class="container">
    <div id="two">Sidebar 2</div>
    <div id="one">Main Content 2</div>
</div>

, мы получим:

Почему?Я уверен, что это что-то простое (что заставляет меня чувствовать себя глупо), связанное с моделью бокса и определением float, но что?

Вы можете поиграть с этим здесь

Answer 1

Если вы удалите margin-right:50px;, это будет иметь для вас больший смысл:)

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

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

Если вы хотите добиться результата примера 2 в примере 1, просто добавьте float:left; к # one.

Answer 2

Это ожидаемое поведение.

Сначала помните, что плавающие элементы не являются частью нормального потока .Остальное приведено в следующей спецификации:

Плавающее поле смещается влево или вправо до тех пор, пока его внешний край не коснется края содержащего блока или внешнего края другого объекта.Если есть строчный блок, внешняя верхняя часть всплывающего окна выравнивается с вершиной текущего линейного блока.

По сути, ваш второй пример извлекает div#two из потока документов и сдвигает еговправо, пока он не коснется внешнего края своего родного брата, div#one.Поскольку у него margin: 50px;, достаточно места для div#two.

Ваш первый пример, div#one уже очистил эту строку как блокэлемент уровня и, следовательно, div#two плавает вправо, а выровнен по верху текущей строки .

Подробнее о спецификации W3C CSS2.1 для чисел