Question

html结构：

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

风格：

#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;
}

为什么页脚中的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

Answer 2

添加div以清除浮动项

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

和css

.clear {
   clear: both;
}

由于左右浮动，他们占据的空间会崩溃，所以清理浮动会带回这个空间，页脚会出现在它之后

Answer 3

该解决方案非常不错，因为从上面的解决方案中选择的内容是他们在页面中写入的文本，因此对用户可见： HTML：

<section id="main">
        <div>
            <div class="box">
                <img src="./img/myPhoto.jpg">
            </div>
            <div class="box">
                <img src="./img/myPhoto.jpg">
            </div>
            <div class="box">
                <img src="./img/myPhoto.jpg">
            </div>
        </div>
    </section>
    <div class="temp">c</div>
    <footer>
        <p>Hello Copyright &copy; 2019</p>
    </footer>

CSS：

.box{
    float: left;
    width: 33%;

}

.temp{
    clear: both;
    margin-top: 20px;
    visibility: hidden;
}
footer p{
    clear: left;
    text-align: center;
    background-color: yellow;
}

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

3 个答案: