Front end xiaobai, recently just learned the holy cup layout, for the layout of the Holy grail appeared in the negative margin problem has some questions, I hope the big guy to explain.

The DOM structure:

 <div class="parent">
      <div class="center float">Center</div>
      <div class="left float">Left</div>
      <div class="right float ">Right</div>
  </div>  
Copy the code

The CSS code:

<style>
    .parent{
        background: rgb(185.178.178); 
        padding: 10px 100px 10px 200px; 
        border: 2px solid rgb(26.131.73);  
        }
    .float{
        float: left;
        text-align: center;
        color: whitesmoke;
    }
    .parent::after{
        content: ' ';
        display: block;
        clear: both;
    }
    .center{
         background: rgb(59.71.90);
         height: 200px;
         width: 100%;
        }
    .left{
        width: 200px;
        height: 200px;
        background: tomato;
        margin-left: -100%;
        position: relative;
        right: 200px;
        
    }
    .right{
        width: 100px;
        height: 200px;
        background: turquoise;
        margin-right: -100px;
    }

</style>
Copy the code

The layout result is as follows:

Understand the negative margin in the above code for

 }
    .right{
        width: 100px;
        height: 200px;
        background: turquoise;
        margin-right: -100px;
    }
Copy the code

Margin-right: -100px; margin-right: -100px; At the beginning of the code, consider writing it as margin-left: -100px; But the result is that the Right side of the Right block and the Right side of the Center block are aligned and cannot occupy the blank padding on the Right side

Would like to consult the big guy for this part of the codemargin-right: -100px;Why does it occupy the blank padding on the right?