浅析BFC与外边距折叠关系

最新推荐文章于 2023-06-05 20:14:58 发布

置顶忘难天

最新推荐文章于 2023-06-05 20:14:58 发布

阅读量329

点赞数

前端工程师专栏收录该内容

6 篇文章 0 订阅

订阅专栏

浅析BFC和外边距折叠

一:BFC

(1)什么是BFC呢？

1.BFC：块级格式化上下文（Block Formatting Content）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

2.在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。

3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

4.简而言之，可以把BFC理解成一个箱子，箱子内部的元素如何摆放都不会影响外部。

二：发生外边距折叠的情况可以分为以下情况

1.当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

2.当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），第一个子元素的上边距会和父元素的上边距合并；最后一个子元素的下边距会和父元素的下边距合并。

3.假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并。如果这个外边距遇到另一个元素的外边距，它还会发生合并。

三：当发生重叠的时候

1、当两个margin都是正值的时候，取两者的最大值；

2、当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移；

3、当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。

四：BFC图解

1.在同一个BFC下会发生外边距合并

这里先说下外边距合并，外边距合并一般有3种情况

第一种，当两个元素垂直排列时，第一个元素的下外边距与第二个元素的上外边距会发生合并。[在这里插入图片描述](https://img-

第二种，当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

在这里插入图片描述

第三种，假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并。

在这里插入图片描述

五：防止margin垂直折叠解决方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直的margin重叠</title>
</head>
<style type="text/css">
    p{
        width: 200px;
        line-height: 100px;  /* 设置行高 */
        text-align: center;  /*设置文字居中*/
        color: red;          /*设置段落字体的颜色*/
        margin: 100px;       /*设置外边距*/
        background: pink;    /* 设置背景颜色*/
        border: 1px solid black; /* 设置边框*/
    }
</style>
<body>
    <p>p1: hello  200*100</p>
    <p>p2: world  200*100</p>
</body>
</html>

结果：两个p之间的距离为100px，发送了margin重叠

在这里插入图片描述

理解：

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>防止垂直的margin重叠</title>
</head>
<style type="text/css">
    p{
        width: 200px;
        line-height: 100px;
        text-align: center;
        color: red; 
        margin: 100px;
        background: pink;  
        border: 1px solid black;
    }
    .wrap{  
        overflow: hidden; /*防止垂直的margin重叠 */
    }
</style>
<body>
    <p>p1: hello  200*100</p>
    <div class="wrap">
        <p>p2: world  200*100</p>
    </div>

</body>
</html>