顶部的边缘顶部重叠元素

时间：2017-05-19 12:08:04

标签： html css margin styling

请考虑这个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上测试过。）

4 个答案:

答案 0 :(得分：1)

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

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

专注于float 含义

＆＃13;
＆＃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;
＆＃13;
＆＃13;

答案 1 :(得分：0)

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

＆＃13;
＆＃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;
＆＃13;
＆＃13;

答案 2 :(得分：0)

＆＃13;
＆＃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;
＆＃13;
＆＃13;

答案 3 :(得分：0)

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

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

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

相关问题
最新问题