CSS理解：BFC和边距重叠

最新推荐文章于 2022-07-02 16:19:04 发布
最新推荐文章于 2022-07-02 16:19:04 发布
阅读量1k 收藏 2
点赞数 1
CC 4.0 BY-SA版权
分类专栏： css 文章标签： css 块级格式化上下文
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/itSeven7/article/details/79009215
本文详细解释了BFC的概念及其构建方法，并通过实例展示了BFC如何解决高度塌陷、浮动重叠和边距重叠等问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

什么是BFC

BFC （block formatting context） 及块级格式化上下文，从样式上看，具有 BFC 的元素与普通的容器没有什么区别，从功能上看，BFC相当于构建了一个密闭的盒子模型，在BFC中的元素不受外部元素的影响；

个人理解：BFC就是将盒子中子元素的属性锁在父元素中，例如margin,float 使其不影响盒子外的元素。

如何构建BFC

以下情况都会使元素产生BFC
- 根元素或其它包含它的元素 (也就是html元素本身就是BFC)
- float:left ,right
- position:absolute,fixed
- display:inline-block,table-cell,table-caption;(行内块元素与表格元素)
- overflow：hidden，auto，scroll （非 visible属性）
- display: flow-root
- column-span: all

BFC的作用
1. 解决高度塌陷

由于浮动元素脱离了文档流，普通盒子是无法包裹住已经浮动的元素；父级元素的高度为0；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * { box-sizing: border-box; }

        .outer {
            background-color: #ccc;
            width: 200px;
        }
        .outer div{
            width: 100px;
            margin: 10px 20px;
            background-color: red;
            width: 100px;
            height: 100px;
        }

    </style>
</head>
<body >
    <div class="outer ">
        <div style="float: left;"></div>
    </div>
</body>
</html>

当子元素浮动 父级获取不到浮动元素的高度，造成高度塌陷，看下图：
这里写图片描述

当父元素转变为BFC时，浮动元素被包裹住

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * { box-sizing: border-box; }

        .outer {
            background-color: #ccc;
            width: 200px;
            overflow: hidden;  //转变为BFC
        }
        .outer div{
            width: 100px;
            margin: 10px 20px;
            background-color: red;
            width: 100px;
            height: 100px;
        }

    </style>
</head>
<body >
    <div class="outer ">
        <div style="float: left;"></div>
    </div>
</body>
</html>

创建BFC后父元素重新获取到浮动元素的高度 如下图：

2.浮动重叠

当一个元素浮动，后面的元素没浮动，那么后面的元素就会与浮动元素发生重叠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * { box-sizing: border-box; }

        .outer {
            background-color: #ccc;
            width: 200px;
            overflow: hidden;
        }
        .outer div{
            width: 100px;
            margin: 10px 20px;
            background-color: red;
            width: 100px;
            height: 100px;
        }

    </style>
</head>
<body >
    <div class="outer ">
        <div style="float: left;"></div>
        <div ></div>
    </div>
</body>
</html>

后一个元素 与前一个浮动元素发生重叠，只看到了浮动元素：
这里写图片描述

根据BFC不与浮动元素重叠的特性，为没有浮动的元素创建BFC环境

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * { box-sizing: border-box; }

        .outer {
            background-color: #ccc;
            width: 200px;
            overflow: hidden;
        }
        .outer div{
            width: 100px;
            margin: 10px 20px;
            background-color: red;
            width: 100px;
            height: 100px;
        }

    </style>
</head>
<body >
    <div class="outer ">
        <div style="float: left;"></div>
        <div style="overflow: hidden;"></div>
    </div>
</body>
</html>

元素重新显示：
这里写图片描述

3.边距重叠

边距重叠分为两种情况

1.父子重叠

当 父级没有 
-  垂直方向的border，
-  垂直方向 padding，
-  父级不是内联元素，
-  父级不是BFC,
-  父级没有清除浮动，

这五个条件时，子元素的上下边距会和父级发生重叠 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * { box-sizing: border-box; }

        .outer {
            background-color: #ccc;
            width: 200px;
        }
        .outer div{
            width: 100px;
            margin: 10px 20px;
            background-color: red;
            width: 100px;
            height: 100px;
        }

    </style>
</head>
<body >
    <div class="outer ">
        <div></div>
    </div>
</body>
</html>

这里写图片描述

解决方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * { box-sizing: border-box; }

        .outer {
            background-color: #ccc;
            width: 200px;
            /*padding: 1px;*/    加padding  
            /*border: 1px solid yellow;*/ 加border
            /*display: inline-block;*/  内联块
            /*overflow: hidden;*/       BFC
        }
        .clearfix:after{                清除浮动
            content: '';
            display: table;
            clear:both;
        }
        .outer div{
            width: 100px;
            margin: 10px 20px;
            background-color: red;
            width: 100px;
            height: 100px;
        }

    </style>
</head>
<body >
    <div class="outer clearfix">
        <div></div>
    </div>
</body>
</html>

上面注释的五种方法都可以实现：
这里写图片描述

  • 兄弟重叠

当两个元素的垂直边距相互接触时，两者边距会发生合并，合并的规则为，
- 如果是正数比大小，大的覆盖小的
- 都为负数比绝对值大小，大的覆盖小的
- 正负都有取其差

解决方法

1.将两个元素浮动
2.将两个元素display：inline-block
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * { box-sizing: border-box; }

        .outer {
            background-color: #ccc;
            width: 200px;
            overflow: hidden;
        }
        .outer div{
            width: 100px;
            margin: 10px 20px;
            background-color: red;
            width: 100px;
            height: 100px;
            /*下面两种方式*/
            float: left;
            display: inline-block;
        }
    </style>
</head>
<body >
    <div class="outer ">
        <div ></div>
        <div ></div>
    </div>
</body>
</html>

这里写图片描述

其实兄弟重叠完全可以设置一个最大值的边距就可达到想要的效果，完全没有必要去使用上面的两个方法。

参考链接：
https://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html
https://www.w3cplus.com/css/understanding-css-layout-block-formatting-context.html
https://www.cnblogs.com/HCJJ/p/6263075.html

前端CSS理解 —— BFC(块级格式化上下文)
upgrade_bro的博客
08-04 284
BFC即 Block Formatting Contexts (块级格式化上下文)，BFC是指浏览器中创建了一个独立的渲染区域（内部元素的渲染不会影响边界以外的元素）。应用BFC可以避免margin折叠、清除浮动……
CSS 外边距(margin)重叠及防止方法
12-13
两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。 但是边界的重叠也有例外情况： 1、水平边距永远不会重合。 2、在规范文档中，2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法如下： a、全部都为正值，取最大者； b、不全是正值，则都取绝对值，然后用正值减去最大值； c、没有正值，则都取绝对值，然后用0减去最大值。 注意：相邻的盒模型可能由DOM元素动态产生并没有相邻或继
BFC
李天下
06-16 998
1.BFC的概念 BFC（Block Formatting Context）：块级格式化上下文。你可以把它理解成一个独立的区域。 另外还有个概念叫IFC。不过，BFC问得更多。 2.BFC 的原理/BFC的布局规则【非常重要】 BFC 的原理，其实也就是 BFC 的渲染规则（能说出以下四点就够了）。包括： （1）BFC 内部的子元素，在垂直方向，边距会发生重叠。 （2）BFC在页面...
BFC（边距重叠解决方案）
weixin_70437515的博客
07-02 525
BFC: 块级格式化上下文 BFC基本概念： 是 布局的一个概念，是一块独立的渲染区域，是一个环境，里面的元素不会影响到外部的元素 。 父子元素和兄弟元素边距重叠，重叠原则取最大值。空元素的边距重叠是取 与 padding 的最大值。5.2 BFC原理（渲染规则|布局规则）：（1）内部的 会在垂直方向，从顶部开始一个接着一个地放置； （2） 垂直方向的距离由 (外边距)决定，属于同一个 的两个相邻 的 会发生重叠； （3）每个元素的 的左边， 与包含块 的左边相接触，（对于从左到右的格式化
边距重叠和BFC
RenBaiLi的博客
09-03 416
一丶边距重叠 什么是边距重叠？ 什么情况下会发生边距重叠？ 如何解决边距重叠？ 边距重叠：两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。 有两种边距重叠的情况： 1. 父子关系的边距重叠： 如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距 给父元素添加 overflow：hidden 这样父元素就变为 BFC，不会随子元素产生外边距 <style> .out ...
论BFC和外边距重叠
qq_43288277的博客
09-27 371
BFC（Block formatting contexts）? 单从字义上看BFC是:块级格式上下文 1. w3c规范中的BFC定义： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。 在BF...
详解CSS边距重叠与解决方案探究
01-18
最近复习了一下CSS相关的知识点，对于CSS中经典的边距重叠问题进行了梳理总结，目的是检验复习效果，也希望对他人有所帮助，疏漏之处还请各位前端老鸟们不吝赐教。 提出问题：在使用CSS排版布局时，会发现兄弟或者...
HTML+CSS学习：盒子模型、定位与BFC/IFC解析
在BFC中，元素按照从上至下、从左至右的顺序排列，并且不会与其他BFC重叠。 3. **IFC（Inline Formatting Context，行内格式化上下文）**：与BFC相对，IFC是处理行内元素的规则。行内元素在同一行内显示，直到行宽...
2022前端面试必备：BFC、CSS布局与渐进增强详解
同时，BFC还能用于清除浮动和解决垂直边距重叠问题。 边距重叠是BFC处理的重要场景之一，无论是父子元素还是同级兄弟元素，通过转变为BFC，可以避免默认情况下由于边距叠加导致的问题。解决方法通常是在受影响的...
详解CSS布局：圣杯、双飞翼与BFC布局技术
它们不仅能够帮助开发者更好地理解CSS布局的原理，还能够在实际开发中提供更为灵活和高效的布局解决方案。" 在编写网页时，了解并熟练使用这些布局技术对于创建响应式和适应不同设备的网页至关重要。以上知识可以...
CSS 外边距(margin)重叠及防止方法-----------------边距重叠解决方案(BFC)
Calmlyx的博客
11-25 334
边距重叠解决方案(BFC) BFC： 其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文” 问题描述： 两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。 ...
理解CSS布局和BFC
W3cplus
01-07 461
CSS布局中有一些概念，一旦理解了这些概念，就能真正的提高你的CSS能力。这篇文章主要介绍的是关于块格式化上下文（Block Formatting Context），也就是大家俗称的BFC。你可能从未听说过这个术语，但只要你曾经使用过CSS布局，你就可能知道它是什么。理解BFC是什么，它有什么功能，以及如何创建一个BFC是非常有用的，这些能帮助你更好的理解CSS布局。在这篇文章中，我将会通过几个很
【css】外边距重叠及解决办法BFC
qq_45406325的博客
08-05 1075
BFC(Block Formatting Context)格式化上下文，作用于块级元素是一个独立渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
css布局中的BFC问题（简称边距重叠）
weixin_45645412的博客
01-19 267
css布局中的BFC问题（简称边距重叠） 什么是边距重叠 两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。 边距重叠有两种 1. 父子关系的边距重叠 如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距 解决方法： 1.给父盒子设置边框 2.给父盒子设置内边距 3.给父盒子加overflow：hidden 2. 同级兄弟关系的重叠： 同级元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那
边距重叠以及解决方案BFC
weixin_34348805的博客
02-07 670
边距重叠 统一的解决方案；设置padding或者border或者触发BFC 边距重叠有一下三种情况： 首先把所有的margin格式清空 <head> <title>边距重叠</title> <style> html *{ margin-top: 0px; ...
css防止边距重叠的方法
qq_36341800的博客
08-30 656
1.今天整理了一下防止padding击穿的几种方法 先假设一组dom结构 通常情况下，如果给子元素设置margin,就会产生这个属性对父元素也产生了同样的效果，然而 这其实不是我们想要的结果，我们只想对子元素设置margin，那么现在我们应该怎么做呢？ （1） 给父元素设置边框 .parent { width: 300px;
CSS外边距重叠
我有一个梦的博客
06-19 482
1、什么是外边距重叠 margin-college称作外边距重叠。在CSS中，相邻的两个盒子（可能是兄弟关系或者祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，因而所结成的外边距称为折叠外边距。 2、外边距重叠的例子 首先我们准备两个div盒子（兄弟关系），代码如下所示。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta n
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值