Question

请考虑这个html代码段：

<!DOCTYPE html>
<html>
  <head>
    <title>no margin</title>
  </head>
  <body>
    <div style="background-color: red; width: 120px; height: 160px; float:
    left"></div>
    <div style="background-color: blue; width: 160px; height: 120px;
    margin-left: 120px"></div>
    <div style="background-color: green; width: 100px; height: 100px;
    clear: left; margin-top: 20px;"></div>
  </body>
</html>

为什么绿色div的边距与红色div重叠？我希望将绿色和红色div分开可见的边距。（在Firefox 53上测试过。）

Answer 1

您在红色元素上使用了float属性。并尝试定位其他元素取决于它。

如果要解决此问题，您还必须将float:left设置为其他框。

专注于float 含义

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <title>no margin</title>
  </head>
  <body>
    <div style="background-color: red; width: 120px; height: 160px; float:
    left"></div>
    <div style="background-color: blue; width: 160px; height: 120px;
    margin-left: 120px; float:left"></div>
    <div style="background-color: green; width: 100px; height: 100px;
    clear: left; margin-top: 20px; float:left"></div>
  </body>
</html>

＆＃13;

Answer 2

这是因为你必须浮动元素，将div放在前2个div之间，如下所示：

＆＃13;

.row {
  width: 100%;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>no margin</title>
</head>

<body>
  <div class="row">
    <div style="background-color: red; width: 120px; height: 160px; float:
    left"></div>
    <div style="background-color: blue; width: 160px; height: 120px; float:left;"></div>
  </div>
  <div style="background-color: green; width: 100px; height: 100px;
    clear: left; margin-top: 20px; float: left;"></div>
</body>

</html>

＆＃13;

Answer 3

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <title>no margin</title>
  </head>
  <body>
    <div style="background-color: red; width: 120px; height: 160px; float:
    left"></div>
    <div style="background-color: blue; width: 160px; height: 120px;
    margin-left: 120px"></div>
    <div style="background-color: green; width: 100px; height: 100px;
    clear: left;top:160px;position:absolute; margin-top: 20px;"></div>
  </body>
</html>

＆＃13;

Answer 4

margin属性位于盒子模型的外部，因此它与绿色上方的红色方块重叠。

margin-top是20 px，这是我们看到的完全重叠

正如您在下面的示例中所看到的，边距位于框边框之外

顶部的边缘顶部重叠元素

4 个答案: