Html 为什么不是'；和这个部门合作？

这里的示例有两个

div

，可以看出，无论我为

punchline

div增加多少

margin top

，它都没有任何效果：
只要

徽标

从顶部开始，它就会走得更远。为什么呢？当我移除

logo

div时，div开始“正常”运行

代码：

<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>

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

.logo{
浮动：左；
/*左边距：19px*/
字号:27 ;；
背景色：红色；
边缘顶部：100px；
}
punchLine先生{
背景颜色：绿色；
/*浮动：左*/
利润上限：1000px；
明确：两者皆有；
/*左边距：300px；
字号:14 ;；
颜色：#264B5D；
文本转换：大写；
字体系列：Arial*/
}

Logizsolutions.com
软件和技术解决方案。。。

应用这个，它会有帮助

.punchLine{
    float: left;
}

查看解决方案

需要在浮动div之后添加

clear:both

代码：

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>

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

为什么

margintop

不使用此div

由于浮动元素时无法正确折叠页边距属性，因此请参阅W3官方文档：

浮动框和任何其他框之间的边距不会塌陷（甚至浮动框与其流入子项之间也不会塌陷）

---

解决 1：无浮动

除去浮动，如果元素要在彼此下面，为什么首先需要它

.logo{
边缘顶部：100px；
字体大小：27px；
颜色：#FFF；
背景：#000；
}
.标志跨度{
颜色：#0072BC；
}
punchLine先生{
背景颜色：浅蓝色；
边缘顶部：100px；
}

Logizsolutions.com
软件和技术解决方案。。。

因为logo

float:left

删除此项，它将解决您的问题。请不要使用

标记，它们已被弃用。相反，您可以使用

。此外，您没有为字体大小值指定

单位，例如应为
27px
。@SofL如果有人的解决方案解决了您的问题，您可能希望使用大复选框将其作为答案。有关更多信息：