鍍金池/ 問(wèn)答/HTML5  HTML/ CSS中margin的怪異行為

CSS中margin的怪異行為

css中相鄰的兩個(gè)float的元素，在定義好第二個(gè)元素的margin-left后，第一個(gè)元素即便定義了margin-right還是有不生效的可能。

場(chǎng)景一：僅定義第二個(gè)元素margin-left為90的情況
圖片描述

場(chǎng)景二：定義第一個(gè)元素margin-right為-90，第二個(gè)元素的margin-left為90的情況
圖片描述

場(chǎng)景三：定義第一個(gè)元素的margin-right為-100，第二個(gè)元素的margin-left為90的情況
圖片描述

問(wèn)題
1：場(chǎng)景二兩個(gè)元素為什么不能彼此貼在一起？
2：場(chǎng)景二、和場(chǎng)景三中第一個(gè)元素的margin-right是有變化的，為什么渲染出來(lái)沒有任何差異

附測(cè)試代碼：

<!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>
回答
編輯回答
墨小羽
  1. float影響了margin的效果；
  2. display：block/inline-block也影響了布局的效果
2017年5月8日 15:04
編輯回答
孤影

<h1>因?yàn)樵O(shè)置了一個(gè)大于他自身寬度的負(fù)marign，導(dǎo)致它的margin-box為0了。
而在浮動(dòng)排列中元素所占寬度就是其margin-box的寬度,對(duì)于.right就好像<h1>不存在一樣,
補(bǔ)充：這里<h1>即使設(shè)置再大的負(fù)數(shù)，因?yàn)楦?dòng)規(guī)則.right的margin-box的左邊，也不會(huì)跑到其包含塊的左邊之外

2018年8月2日 13:46