为什么保证金顶部不起作用？

Question

html结构:

#main {
  margin: 0 auto;
  width: 960px;
}

#left {
  float: left;
  border: 1px solid red;
  width: 300px;
  margin-right: 10px;
  height: 500px;
}

#right {
  float: right;
  border: 1px solid green;
  width: 500px;
  height: 500px;
}

#footer {
  clear: both;
  margin-top: 20px;
  border: 1px solid lime;
  height: 200px;
}

风格:

<div id="main">
  <div id="left"></div>
  <div id="right"></div>
  <div id="footer"></div>
</div>

为什么 margin-top: 20px;页脚不起作用？原因可能是什么原因造成的？

Answer 1

尝试添加一些更清晰的:

<div id="main">
  <div id="left"></div>
  <div id="right"></div>
  <div style="clear:both"></div>
  <div id="footer"></div>
</div>

当元素的css clear设置both为时,它不会让ANY FLOATING元素在其边框和文本区域中重叠,这意味着margin可以与float元素重叠.这就是为什么你看不到页脚的边距.所以我们基本上需要一个额外的div,它不会浮动,所以你的页脚的边距有一些推动.尝试下面的代码(使用BG和Borders),你会看到我在说什么.

没有额外的div:

<div id="main">
  <div id="left" style="background:#FF000;border:solid 1px #000000;float:left">LEFT</div>
  <div id="right" style="background:#00FF00;border:solid 1px #000000;float:right">RIGHT</div>
  <div id="footer" style="clear:both;margin-top:10px;background:#00FFFF;border:solid 1px #000000;">FOOTER</div>
</div>

额外的div:

<div id="main">
  <div id="left" style="background:#FF000;border:solid 1px #000000;float:left">LEFT</div>
  <div id="right" style="background:#00FF00;border:solid 1px #000000;float:right">RIGHT</div>
  <div style="background:#0000FF;border:solid 1px #000000;clear:both">CLEARER</div>
  <div id="footer" style="margin-top:10px;background:#00FFFF;border:solid 1px #000000;">FOOTER</div>
</div>

资源:

http://www.w3.org/TR/CSS2/visuren.html#flow-control