边距重叠以及解决方案BFC

时间 2021-02-13

标签 html 布局 post flex code orm htm table 栏目 HTML 繁體版

原文原文链接

边距重叠

统一的解决方案；设置padding或者border或者触发BFC

边距重叠有一下三种状况：

首先把全部的margin格式清空html

<head>
  <title>边距重叠</title>
  <style>
    html *{
      margin-top: 0px;
      padding: 0px;
    }
  </style>
</head>
<body>

1.父子元素之间
块级父元素与第一个或者最后一个子元素（父元素不存在上边框、上内边距、内联元素、清除浮动）。即这个父元素对外展示出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。父元素的高度：100 或者110 都对.没有overflow: hidden的时候父边距和子边距重叠了，父的高度只有100.加了overflow: hidden，父元素成了新的bfc,就解决了边距重叠的现象，margin-top 没有塌陷进去，因此父的高度是110px;布局

<section id="parentAndChild">
  <style>
    .parent {
      background-color: red;
      /*overflow: hidden;*/
    }
    .child {
      height: 100px;
      margin-top: 10px;
      background-color: yellow;
    }

  </style>
  <div class="parent">
    <div class="child"></div>
  </div>
</section>

2.相邻兄弟姐妹元素post

两个div的边距是50px 而不是90，取了最大值，若为负值，则取绝对值最大的，若一正一负，则取二者的和。

<section >
  <style>
    .left{
      height: 100px;
      margin-bottom: 50px;
      background-color: red;
    }
    .right{
      height:100px;
      background-color: blue;
      margin-top: 40px;
    }
  </style>
  <div class="left"></div>
  <div class="right"></div>
</section>

3.空块元素
若是存在一个空的块级元素， border、 padding、 inline content 、height 、min-height 都不存在，那么上下边距居中将没有任何阻碍，上下边距将合并。取值规则同2同样flex

<section>
  <p style="margin-bottom: 0px;">这个段落的和下面段落的距离将为20px</p>

  <div style="margin-top: 20px; margin-bottom: 50px;"></div>

  <p style="margin-top: 0px;">这个段落的和上面段落的距离将为20px</p>
</section>

解决方案：BFC讲解

BFC (block formatting context) 块级格式化上下文 =====》是为了解决边距塌陷（边距重叠）问题。

基本概念

BFC (block formatting context) 块级格式化上下文code

基本原理

即布局规则
一、每一个元素的margin box的左边，与包含块border box 的左边相接触，即便浮动也如此
二、BFC区域不会与float box 重叠
三、BFC是一个隔离的独立的容器，容器里面的子元素的不会影响到外面的元素，反之亦然。
四、计算BFC高度的时候，浮动元素也参与计算。orm

哪些元素生成BFC

一、overflow: 不为visible
二、postion: absoluted, fixed
三、float 不为none
四、根元素
五、display:inline-block\table-cell\table-caption\flex\inline-flex

应用和解决了什么问题

一、自适应两栏布局htm

<section>
  <style>
    .left{
      width: 100px;
      float:left;
      height: 100px;
      background-color: yellow;
    }
    .right{
      height: 150px;
      background-color: red;
      overflow: hidden;
    }
  </style>
  <div class="left"></div>
  <div class="right"></div>
</section>

二、清除内部浮动it

<section>
  <style>
    .par{
      border:5px solid red;
      width:1000px;
      overflow: hidden;//生成BFC，把浮动元素的高度计算在内，变相地清除了内部浮动
    }
    .child{
      border: 5px solid blue;
      float: left;
      height:100px;
      width: 100px;
    }
  </style>
  <div class="par">
    <div class="child"></div>
    <div class="child"></div>
  </div>
</section>

三、防止边距重叠(BFC中子元素边距重叠)io

两个div 中间取了最大值30为重叠了，在p外面包裹一层容器，并触发该容器生成一个
BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了.

<section>
  <style>
    .wrap{
      overflow: hidden;
    }
    .top{
      height: 100px;
      margin-bottom: 40px;
      background-color: red;
    }
    .bottom{
      height: 100px;
      margin-top: 30px;
      background-color:blue;
    }
  </style>
  <p class="top"></p>
  <div class="wrap">
    <p class="bottom"></p>
  </div>
</section>

总结：由于BFC内部的元素和外部的元素绝对不会互相影响，所以，当BFC外部存在浮动时，它不该该影响BFC内部Box的布局，BFC会经过变窄，而不与浮动有重叠。一样的，当BFC内部有浮动时，为了避免影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。table