学会使用BFC解决margin重叠问题

问题描述:上下两个元素都设置了margin,margin会合并,只保留大的一个

<body>
  <ul>
    <li>
      <div>1</div>
    </li>
    <li>
      <div>1</div>
    </li>
    <li>
      <div>1</div>
    </li>
    <li>
      <div>1</div>
    </li>
  </ul>
</body>
  <style>
    div {
      background: pink;
      margin: 20px 0;
    }
  </style>

解决方式:BFC

块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。

触发条件:

  1. position: absolute/fixed
  2. display: inline-block / table
  3. float 元素
  4. ovevflow !== visible

根据条件,处理上面的问题,改动一下样式

  <style>
    li {
      overflow: hidden;
    }
    div {
      background: pink;
      margin: 20px 0;
    }
  </style>

或者

  <style>
    li {
      display:table;
    }
    div {
      background: pink;
      margin: 20px 0;
    }
  </style>
相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页