浮动与负margin解释

最新推荐文章于 2021-09-16 16:54:34 发布

Haley6

最新推荐文章于 2021-09-16 16:54:34 发布

阅读量195

点赞数 2

分类专栏： margin 文章标签： css3

本文链接：https://blog.csdn.net/Haley6/article/details/115819480

版权

margin 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

浮动与负margin解释

参考https://blog.csdn.net/Liu_yunzhao/article/details/103976547：

代码

代码一

两个左浮动元素

<style type="text/css">
      .content {
        width: 600px;
        height: 300px;
        background-color: green;
        margin: 100px auto;
        color: white;
        /* //超出隐藏 */
        overflow: hidden;
        font-size: 50px;
      }
      .middle {
        /* 因为给 content 元素设置了 overflow: hidden 所以 
          middle 元素向左移动200px后，左边超出的部分将被隐藏 */
        /* margin-left: -200px; */

        /*left 元素会覆盖到 middle 元素上 解释见代码下边(解释一)  */
        margin-right: -200px;
        float: left;
        height: 300px;
        width: 400px;
        /* 换行 break-all	允许在单词内换行。 */
        word-break: break-all;
        background-color: blue;
      }
      .left {
        float: left;
        width: 100px;
        height: 300px;
        background-color: black;
      }
    </style>
 <body>
    <div class="content">
      <div class="middle">123456789123456789123456789123456789</div>
      <div class="left">111</div>
    </div>
  </body>

给left元素设置margin-left值

 <style type="text/css">
      /* 
    两个左浮动元素
        - 如果一行剩余宽度无法容下接下来的浮动元素，那么浮动元素会掉下来
     */
      .content {
        width: 600px;
        height: 300px;
        background-color: green;
        margin: 100px auto;
      }
      .middle {
        float: left;
        height: 200px;
        width: 500px;
        background-color: blue;
      }
      .left {
        /* margin: left 200px;  该元素向右移动200px*/
        /* margin-left: -99px;  元素向左移动99px*/
        /* margin-left: -100px;  left元素跑上去了  解释二 1.*/
        /* margin-left: -500px;  left元素左边和content容器左边对齐 解释二 2.*/
        /* margin-left：-100%后 溢出父元素左边 解释二 3.*/
        float: left;
        width: 200px;
        height: 200px;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="middle">123456789123456789123456789123456789</div>
      <div class="left">111</div>
    </div>
  </body>

给left元素设置margin-right值

 <style type="text/css">
      /* 
    两个左浮动元素
        - 如果一行剩余宽度无法容下接下来的浮动元素，那么浮动元素会掉下来
     */
      .content {
        width: 600px;
        height: 300px;
        background-color: green;
        margin: 100px auto;
      }
      .middle {
        float: left;
        height: 200px;
        width: 500px;
        background-color: blue;
      }
      .left {
        /* margin-right: 100px;   元素位置不动，但总宽度 = 200 + 100 = 300 */

        /*下边设置的-99px， 元素位置不动，因为在文档流中它是应该向右移动99px，
        但元素设置了左浮动，所以就又把元素拉回来了，这和设置margin-left：-99px是有区别的 */
        /* margin-right: -99px; */

        /* margin-right: -100px;  该元素的左边界与.middle有边界对齐  见解释三 1. */
        /* margin-right: -500px; 该元素的左边界与.middle的右边界对齐  见解释三 2.*/
        float: left;
        width: 200px;
        height: 200px;
        background-color: black;
      }
    </style>
   <body>
    <div class="content">
      <div class="middle">123456789123456789123456789123456789</div>
      <div class="left">111</div>
    </div>
  </body>

代码二

两个右浮动元素

如果一行剩余宽度无法容下接下来的浮动元素，那么浮动元素会掉下来

<div class="content">
      <div class="middle"></div>
      <div class="left"></div>
  </div>

  .content {
      width: 600px;
      height: 600px;
      background-color: green;
      margin: 100px auto;
  }

  .middle {
      float: right;
      width: 500px;
      height: 200px;
      background-color: blue;
  }

  .left {
      float: right;
      width: 200px;
      height: 200px;
      background-color: black;
  }

给left元素设置margin-right值
在这里插入图片描述

给left元素设置margin-left值
在这里插入图片描述

这里各个效果和两个左浮动元素效果正好相反，可以结合上面去理解

解释

在这里插入图片描述

解释一
- 一个盒子 总宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
  当我们给 middle 元素设置 margin-right: -200px 后，middle元素的实际总宽度 = 400 + （-200） = 200
- 给元素设置margin只会影响相邻元素摆放位置、自己的摆放位置、自己的总宽度、自己的总高度，并不会影响自己的内容宽度或高度的显示。
- 给元素margin-left、margin-right设置负值，不会影响内容宽度显示，但元素总宽度会改变，每个元素的摆放位置是根据总宽度、总高度来进行摆放的，虽然元素的内容宽高会完全显示，但设置负值的那部分距离对其它元素位置摆放没有影响(left覆盖的原因)，这部分距离是显示在相邻元素的上边还是下边，是要根据每个元素的层级来决定的。
解释二:
1. 设置margin-left：-100px后,left现在的总宽度 = 200 + （-100） = 100，
  而第一行正好剩余了 100px 的空间，所以left元素必须上去，上去也本该超出100px的，但是却left元素右边和content容器右边对齐了，而不是left元素左边和middle的右边对齐。原因：因为给left元素设置margin-left负值后，.left的总宽度变小了，而总宽度减少的这部分也就是margin-left设置负值的这部分，不会影响各个元素位置摆放且内容宽度也必须要显示出来，又由于.left浮动会覆盖住前边的.middle浮动，所以最终素的右边和容器右边就对齐了。
  
  或者解释为，margin-left：-100px，使得自己宽度左边减小了100px，右边的100px会移动到原来左边100px本该移动到的位置（左边贴紧.milldle右边），移动后由于内容需要完全显示且后浮会覆盖前浮，所以自动把左边真实宽度（100px）补到了.middle上，所以总结为**.left右边界向左移动100px，然后补全自己**。left有左边的100px在.middle上
2. 设置margin-left：-500px后，left元素左边和content容器左边对齐了，现在left总宽度 = 200 + （-500） = -300，当left元素宽度为0时，left元素的左边界是和middle右边界对齐的（此时.left右边界向左移动200px，正好在.middle右边界上，然后补全自己左边），现在把left元素再向左移动300px，则left元素的右边界就要向左移动300px距离.右因为自身宽度为200px，故向左补全自己（width）时会使得.left左边界贴到.middle左边界，所以会出现上述情况
3. 这里 100% 是基于父元素的宽度的设置的外边距，等同于margin-left:-600px
4. 该情况下，当margin-left为负且**|margin-left|<width**时，会使得元素右边界向左移动width-（|margin-left|）单位，然后补齐自身左边到原来的width
- 解释三：
  1. 设置margin-right：-100px后，元素跑上去了且元素左边界和middle右边界对齐。可以理解为.left右边宽度先损失了100px，不影响左边与.left与.middle的右边界对齐，对齐后因为width为200px，要补全自己右边的100px，所以会突出去100px
  2. 给元素设置margin-right：-500px后，元素跑上去了且元素左边界和middle右边界对齐，而不是向左覆盖。因为当设置margin-right：-200px时，此时元素的总宽度为0，left元素的左边和middle元素的右边对齐，（但是仍然要补全右边的200px，所以还是会紧贴.middle右边向右伸长200px），此时我们再增加margin-right负值时，应该向右移动，但是它又有左浮动限制，所以就又紧贴 middle 元素，但当设置margin-left负值时，正好和浮动方向一致，所以就会覆盖元素了。

总结

给元素设置浮动以后，元素就会变成块级元素
如果一行剩余宽度无法容下接下来的浮动元素，那么浮动元素会掉下来
当元素的浮动方向和margin的方向相同时，该元素可以覆盖或（向设置浮动的方向）远离上一个浮动元素
当元素的浮动方向和margin的方向相反时，该元素不能覆盖上一个浮动元素，最近只能紧贴上一个元素右边

举个栗子

 <style>
      /* float+负margin */
      .left {
        width: 100%;
        float: left;
        background-color: #f00;
        /*该元素宽度自适应，当下边操作使得右边宽度减少200px后，最后还是会补齐自己到浏览器宽度
        right的width刚好也为200px，所以right会上来（因为.left在补齐之前减少了200px
        ），左边界与从浏览器最右侧向前进200px覆盖.left元素200px
          */
        /* margin-right: -200px; */
      }
      .right {
        /* 与.left加  margin-right: -200px;相同，但是原理不同，
        这个意思是：.right宽度会减少左边的200px，由于浮动.right右边界会与。left右边界对齐，但是由于
        它要补全自己左边，所以会向左覆盖.right，覆盖自己的width（200px）
        */
        margin-left: -200px;
        float: left;
        width: 200px;
        background-color: #0f0;
      }
    </style>

  <body>
    <div class="left"><p>hello</p></div>
    <div class="right"><p>world</p></div>
  </body>`在这里插入代码片`