Margin折叠与BFC

学不会只能哭

于 2023-02-27 01:18:52 发布

阅读量666

点赞数

分类专栏：前端学习笔记文章标签： css 前端 css3

本文链接：https://blog.csdn.net/m0_61696809/article/details/129234246

版权

前端学习笔记专栏收录该内容

52 篇文章 0 订阅

订阅专栏

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 具有以下特性：

内部的 Box 会在垂直方向上一个接一个地放置。
Box 垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
每个元素的 margin box 的左边，与包含块 border box 的左边相接触（对于从左往右的格式化，否则相反），即使存在浮动也是如此。
BFC 的区域不会与 float box 重叠。
BFC 在页面上是一个独立的容器，外面的元素不会影响到里面的元素，反过来也是如此。
计算 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
评论
Margin折叠与BFC

具体来说，如果兄弟元素A的margin-bottom与兄弟元素B的margin-top相遇，则它们的margin值将合并为一个较大的margin值。例如，如果兄弟元素A的margin-bottom为30px，而兄弟元素B的margin-top为20px，则合并后的margin值将为30px。 BFC（Block Formatting Context）是 CSS 中的一种渲染模式，它是一个独立的渲染区域，具有一定的隔离性，可以让处于 BFC 内部的元素避免影响到外部元素的布局和样式。
复制链接

扫一扫