clear и margin-top

[rookie]

Всем привет!

У меня есть такой layout:

<div class="container">
  <div class="header"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>

Который стилизован таким образом:

.container {
  width: 960px;
  margin: 0 auto;
  background: #eee;
}

.header {
  height: 200px;
  background: #cc3;
}

.content {
  width: 800px;
  height: 300px;
  float: left;
  background: #c33;
}

.footer {
  height: 150px;
  clear: both;
  background: #b63;
}

Задавая элементу clear: right/left/both мы заставляем его учитывать плавающие элементы. Однако, если я задам элементу footer margin-top скажем - 300px, это не возымеет эффекта. В то же время, любое значение margin-top, превышаюшее высоту плавающего блока будет работать по формуле - margin-top(элем. с clear) - height(плав. бл.).

Вопрос - почему в данной ситуации margin работает таким образом, ведь footer вроде как видит плавающий content?

[buddah]

Задавая элементу clear: right/left/both мы заставляем его учитывать плавающие элементы

Задавая элементу clear: right/left/both мы отменяем обтекание с этих сторон.

И что значит " footer вроде как видит плавающий content" ?

Что-то явно ты сам себе в голове нагородил.

[rookie]

И что значит " footer вроде как видит плавающий content" ?

Это значит, что без clear, строковое содержимое элемента footer будет обтекать content, а сам footer будет "залезать" под content. Задавая свойство clear же, мы не просто отменяем обтекание, но так же заставляем footer учитывать плавающий перед ним блок content. Если бы clear просто отменял обтекание, как ты сказал, то footer по прежнему бы продолжал "залезать" под content.

[buddah]

Мы сейчас друг друга не понимаем.

float выдергивает блок из потока.

Если хочешь, чтоб margin-top заработал - добавь блок с clear:both; между контентом и футером, а у футера клир убери.

http://jsfiddle.net/2zHkF/

Почитай вот эту старенькую статью, она очень хорошая: http://softwaremaniacs.org/blog/2005/12/01/css-layout-float/

Edited June 26, 2011 by buddah

[rookie]

Ииху! Слава W3C спекам! Нашел научное объяснение тому, к чему я пришел эмпирическим путем. Если кому-то интересно, то вот тут - http://www.w3.org/TR/CSS2/visuren.html#flow-control написано: Values other than 'none' potentially introduce clearance. Clearance inhibits margin collapsing and acts as spacing above the margin-top of an element. It is used to push the element vertically past the float.

2buddah. Спасибо за ответы и ссылку, но похоже мы действительно друг друга не поняли. Статья что ты мне порекомендовал про float. Свойству clear там посвящены лишь пара абзацев, которые описывают общее применение.

[bob_24]

rookie, объясни что там написано, пожалуйста? Столкнулся с той же проблемой, но не знаю как решить, кроме как добавлять отдельно блок c clear