CSS中margin的怪异行为

KangXT

814

发布于
2018-03-13

css中相邻的两个float的元素，在定义好第二个元素的margin-left后，第一个元素即便定义了margin-right还是有不生效的可能。

场景一：仅定义第二个元素margin-left为90的情况
图片描述

场景二：定义第一个元素margin-right为-90，第二个元素的margin-left为90的情况
图片描述

场景三：定义第一个元素的margin-right为-100，第二个元素的margin-left为90的情况
图片描述

问题
1：场景二两个元素为什么不能彼此贴在一起？
2：场景二、和场景三中第一个元素的margin-right是有变化的，为什么渲染出来没有任何差异

附测试代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test page</title>
    <style>
      .main {
      }
      h1 {
        margin: 0;
        float: left;
        background: yellow;
        margin-right: -100px;
      }
      .right {
        margin:0;
        float: left;
        background: blue;
        margin-left: 90px;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <h1>
        left
      </h1>
      <div class="right">
        right
      </div>
    </div>
  </body>
</html>

css

html5

阅读 2.3k

2 个回答

王能全是谁

✓ 已被采纳

<h1>因为设置了一个大于他自身宽度的负marign，导致它的margin-box为0了。
而在浮动排列中元素所占宽度就是其margin-box的宽度,对于.right就好像<h1>不存在一样,
补充：这里<h1>即使设置再大的负数，因为浮动规则.right的margin-box的左边，也不会跑到其包含块的左边之外