Margin折叠与BFC

5、Margin折叠与BFC

Margin折叠(Margin Collapsing)

​ Margin折叠是CSS的一个特性,指相邻元素之间的垂直外边距(margin)会合并为一个外边距,而不是保留两个边距的值。

​ 例如,当一个元素的上边距与另一个元素的下边距相邻时,它们的外边距会合并为一个值,而不是维持两个值。

Margin折叠发生的情况有:

  • 父子元素的垂直margin发生重叠,此时取两者中的最大值作为合并后的margin。
  • 兄弟元素的相邻的垂直margin发生重叠,此时取两者中的最大值作为合并后的margin。
父子元素Margin折叠
<html>
  <head>
    <style>
      .parent {
        /* 设置父元素的背景颜色为浅蓝色 */
        background-color: lightblue;  
        /* 设置父元素的高度 */
        height: 100px;
        /* 设置父元素的margin-top */
        margin-top: 30px;
      }
      .child {
        /* 设置子元素的背景颜色为浅绿色 */
        background-color: lightgreen;
        /* 设置子元素的高度 */
        height: 50px;
        /* 设置子元素的margin-top */
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <!-- 创建一个父元素 -->
    <div class="parent">
      <!-- 创建一个子元素 -->
      <div class="child"></div>
    </div>
  </body>
</html>

​ 在这个例子中,父元素的margin-top为30px,子元素的margin-top为20px。由于父元素和子元素是垂直相邻的,因此它们的margin将合并为一个较大的margin值,即30px。这意味着父元素与顶部的距离将为30px,而子元素的margin不会对父元素的margin产生任何影响。

margin塌陷:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eD7XmHJq-1677431831021)(C:\Users\tony5\OneDrive\笔记\前端错题笔记\错题笔记.assets\image-20230226162935126.png)]

兄弟元素margin折叠

​ 当兄弟元素具有垂直相邻的margin值时,它们的margin值可能会发生重叠。这种现象称为margin折叠。

​ 具体来说,如果兄弟元素A的margin-bottom与兄弟元素B的margin-top相遇,则它们的margin值将合并为一个较大的margin值。例如,如果兄弟元素A的margin-bottom为30px,而兄弟元素B的margin-top为20px,则合并后的margin值将为30px。

<html>
  <head>
    <style>
      .sibling {
        /* 设置宽度 */
        width: 100px;        
        /* 设置高度 */
        height: 50px;       
        /* 设置背景颜色 */
        background-color: lightgreen;        
      }    
      .sibling-1 {
        /* 设置margin-bottom */
        margin-bottom: 30px;
      }
      .sibling-2 {
        /* 设置margin-top */
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <!-- 创建兄弟元素1 -->
    <div class="sibling sibling-1"></div>   
    <!-- 创建兄弟元素2 -->
    <div class="sibling sibling-2"></div>
  </body>
</html>

在这个例子中,兄弟元素1的margin-bottom为30px,兄弟元素2的margin-top为20px。由于它们是垂直相邻的,因此它们的margin将合并为一个较大的margin值,即30px。因此,兄弟元素2与兄弟元素1的间距将为30px。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hzT0cjNc-1677431831022)(C:\Users\tony5\OneDrive\笔记\前端错题笔记\错题笔记.assets\image-20230226163156400.png)]

解决margin折叠问题的方法

1、使用clearfix:clearfix是一种常用的技巧,用于防止元素的margin折叠。它通过在父元素中添加一个伪元素,从而清除父元素中的浮动元素,从而防止margin折叠。

.clearfix::before {
  content: "";
  clear: both;
  display: table;
}

示例中,通过使用 ::after 伪元素清除浮动元素的外边距,并通过 display: table 将其设置为表格元素,以保证它的高度不为零。

要使用该 clearfix 方法,只需将其类名添加到需要清除浮动元素的父元素上,例如:

<div class="parent clearfix">
      <!-- 创建一个子元素 -->
      <div class="child"></div>
</div>

在上面的示例中,两个浮动元素的外边距将不会折叠,并且父元素的高度将会随着其内部浮动元素的高度自动增加。

2、使用overflow属性:另一种解决margin折叠问题的方法是使用overflow属性。如果将overflow设置为hidden,则可以防止元素的margin折叠。

3、为了避免外边距合并,一种常用的方法是在父元素上设置边框或填充:

.parent {
  background-color: lightblue;
  height: 100px;
  margin-top: 30px;
  border: 1px solid transparent;
}

在上面的代码中,设置边框或填充可以避免父元素和子元素的外边距合并,从而保证元素的正确布局。

4、使用边界框布局(BFC):BFC是一种布局技术,可以防止元素的margin折叠。使用BFC可以保证元素的布局独立于其他元素,从而避免margin折叠问题。

​ BFC(Block Formatting Context)是 CSS 中的一种渲染模式,它是一个独立的渲染区域,具有一定的隔离性,可以让处于 BFC 内部的元素避免影响到外部元素的布局和样式。BFC 的主要作用是解决常见的布局问题,如清除浮动、防止 margin 重叠等。

BFC 具有以下特性:

  1. 内部的 Box 会在垂直方向上一个接一个地放置。
  2. Box 垂直方向的距离由 margin 决定,属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
  3. 每个元素的 margin box 的左边,与包含块 border box 的左边相接触(对于从左往右的格式化,否则相反),即使存在浮动也是如此。
  4. BFC 的区域不会与 float box 重叠。
  5. BFC 在页面上是一个独立的容器,外面的元素不会影响到里面的元素,反过来也是如此。
  6. 计算 BFC 的高度时,浮动元素也参与计算。

常见触发 BFC 的方式包括:

  • 根元素(HTML);
  • float 的值不为 none;
  • position 的值为 absolute 或 fixed;
  • display 的值为 inline-block、table-cell 等。
将parent设置为float:left
.parent {
    background-color: lightblue;
    height: 100px;
    width: 300px;
    margin-top: 30px;
    float: left;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sIlGm9AG-1677431831022)(C:\Users\tony5\OneDrive\笔记\前端错题笔记\错题笔记.assets\image-20230227011414764.png)]

.parent {
    background-color: lightblue;
    height: 100px;
    width: 300px;
    margin-top: 30px;
    position: absolute;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NxMTv7sx-1677431831023)(C:\Users\tony5\OneDrive\笔记\前端错题笔记\错题笔记.assets\image-20230227011557103.png)]

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学不会只能哭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值