Question

以下示例中有两个divs，可以看出，无论我为margin-top div增加punchline的值多少，它都没有任何效果： https://jsfiddle.net/5frzjnbj/
它只是从logo开始走得更远。这是为什么？当我删除logo div时，div开始“正常”行动。

守则：

.logo{
  float: left;
  /*margin-left: 19px;*/
  font-size: 27;
  background-color: red;	
  margin-top:100px;
}
.punchLine{
  background-color: green;
  /*float: left;*/
  margin-top:1000px;
  clear: both;
  /*margin-left: 300px;
  font-size: 14;
  color: #264B5D;
  text-transform: uppercase;
  font-family: Arial;*/
}

<div class="logo">
  <font color="#0072BC">Logiz</font><font color="FFFFFF">solutions.com</font>
</div>	
<div class="punchLine">
  software and tech solutions... 
</div>

Answer 1

申请，帮助

{{1}}

Answer 2

查看解决方案here。

需要在clear: both之后添加floated divs。

代码：

<强> HTML：

<div class="logo">
    <font color="#0072BC">Logiz</font><font color="FFFFFF">solutions.com</font>
</div>
<div class="clearfix"></div>
<div class="punchLine">
    software and tech solutions...
</div>

<强> CSS：

.logo {
  float: left;
  /*margin-left: 19px;*/
  font-size: 27;
  background-color: red;
  margin-top: 100px;
}

.punchLine {
  background-color: green;
  /*float: left;*/
  margin-top: 1000px;
  clear: both;
  /*margin-left: 300px;
    font-size: 14;
    color: #264B5D;
    text-transform: uppercase;
    font-family: Arial;*/
}

.clearfix {
  clear: both;
}

Answer 3

为什么margin-top没有使用此div？

由于在元素浮动时无法正确折叠边距属性，请参阅有关此问题的官方W3文档： Box Model - Collapsin Margins

浮动框与任何其他框之间的边距不会崩溃（甚至在浮动及其流入子项之间也不会崩溃）。

解决方案

1：没有浮动

摆脱浮动，如果元素将在彼此之下，你为什么首先需要它呢？

.logo {
  margin-top: 100px;
  font-size: 27px;
  color: #FFF;
  background: #000;
}

.logo span {
  color: #0072BC;
}

.punchLine {
  background-color: lightblue;
  margin-top:100px;
}

<div class="logo">
  <span>Logiz</span>solutions.com
</div>
<div class="punchLine">
  software and tech solutions...
</div>

2：保证金底部

如果您因某种原因想保留浮动广告，请将margin-bottom: 100px添加到logo div。

.logo {
  margin-top: 100px;
  margin-bottom:100px;
  font-size: 27px;
  color: #FFF;
  background: #000;
  float:left;
}

.logo span {
  color: #0072BC;
}

.punchLine {
  background-color: lightblue;
  clear:both;
}

<div class="logo">
  <span>Logiz</span>solutions.com
</div>
<div class="punchLine">
  software and tech solutions...
</div>

3：填充顶部

或者，如果没有实际背景，您可以添加顶部填充。

.logo {
  margin-top: 100px;
  font-size: 27px;
  color: #FFF;
  background: #000;
  float:left;
}

.logo span {
  color: #0072BC;
}

.punchLine {
  background-color: lightblue;
  clear:both;
  padding-top:100px;
}

<div class="logo">
  <span>Logiz</span>solutions.com
</div>
<div class="punchLine">
  software and tech solutions...
</div>

其他方法可以是透明边框或伪选择器，但我不认为它们是最佳实践，所以我不会在这里解释它们。

P.S请避免使用<font>标签，但很久就会弃用它们。

为什么`margin-top`不能使用这个div？

3 个答案:

解决方案