Как этот float div получает верхнее поле, когда div-обертка не имеет границы? - PullRequest
Новая
       17

Как этот float div получает верхнее поле, когда div-обертка не имеет границы?

2 голосов
/ 17 февраля 2012

Обратите внимание, что Я не спрашиваю об исправлении проблемы, но вместо этого я хочу знать , как плавающий div получает маржу, когда для обертки div установлена ​​граница 0px. Но когда для div-оболочки-оболочки задана граница 1px, то плавающий div не получает поля, но в обоих случаях secondDiv получает верхнее поле, как и предполагалось.

Обратите внимание, что я понимаю тему свертывания полей, но как это связано с установкой границы? 

<div id="container">    
    <div id="firstDiv">FIRST Div inside CONTAINER</div>
    <div id="secondDiv">SECOND Div inside CONTAINER</div>
</div>


body{
    width: 780px;
    margin: 00px auto;
}
#container {
    border: 1px solid orange;   /* but when its set to 0px then floated div gets margin too*/
}
#firstDiv{         
    float:left;
}
#secondDiv{  
     margin: 14px;        
}

http://jsfiddle.net/dmpxw/

Теперь, если граница div-обертки установлена ​​в 0px, то float также перемещается вниз. Но я думаю, не должно ли оно остаться там, как в предыдущем случае?

http://jsfiddle.net/dmpxw/1/

1 Ответ

2 голосов
/ 17 февраля 2012

Это интересный.

Когда у контейнера есть граница, поле второго внутреннего элемента div начинается с границы, т. Е. Поле применяется от границы и далее. Это связано с тем, что граница является последним элементом, который применяется перед измерением поля.

Когда контейнер не имеет границы, поле второго внутреннего элемента div начинается с последнего элемента, который теперь является телом. Таким образом, поле теперь находится за пределами контейнера, поэтому контейнер теперь фактически находится дальше вниз по странице - первый внутренний элемент div не имеет поля и находится прямо вверху контейнера - это сам контейнер, который переместился во втором случай.

Если вы добавите цвет фона в свой пример, вы увидите, что когда у вас есть граница, поле находится внутри контейнера, а когда у вас нет границы, поле находится вне контейнера. Посмотреть пример на JSFiddle .

...