前端面试题---对BFC规范的理解

最新推荐文章于 2024-03-26 20:52:05 发布

Branlen

最新推荐文章于 2024-03-26 20:52:05 发布

阅读量494

点赞数

分类专栏：前端面试 CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_42367749/article/details/105164566

版权

前端同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

面试

9 篇文章 0 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

定义

BFC 全称为块格式化上下文 (Block Formatting Context) 。

官方定义：一个块格式化上下文（block formatting context）是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。

元素变为BFC的条件

根元素或其它包含它的元素
浮动元素 (left，right)
绝对定位元素 (absolute 或 fixed)
内联块 (元素具有 display: inline-block)
表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
具有overflow 且值不是 visible 的块元素(hidden | auto 或 scroll)
display: flow-root
column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all
的元素并不被包裹在一个多列容器中。

添加后的作用有啥
主要有两个作用

1.使 BFC 内部浮动元素不会到处乱跑

<style>
        .out{
         border: 3px solid palevioletred;
         min-height: 20px; 
        }
        .in{
            height: 200px;
            background-color: #9c2b2b;
            width: 50px;
            margin-left: 20px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>

效果图如下

通过让父元素parent，满足上面成为BFC元素的其他一个条件，就可以撑开父元素的高度。效果图如下
在这里插入图片描述

2.和浮动元素产生边界

<style>
        div{
            border:2px solid saddlebrown;
            height: 100px;
        }
        .left{
            min-width: 200px;
            float: left;
            margin-right: 20px;
        }
        .right{
            border-color: salmon;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

效果图如下，左边div并没有和右边产生边距
在这里插入图片描述
当对右边的元素添加overFlow:hidden/auto，则可以产生边距，效果图如下

3. margin叠加的问题

但我们必须记住的是外边距折叠（Margin collapsing）只会发生在属于同一BFC的块级元素之间。如果它们属于不同的 BFC，它们之间的外边距则不会折叠。所以通过创建一个不同的 BFC ，就可以避免外边距折叠。

Branlen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端面试题---对BFC规范的理解

BFC有点晦涩难懂，建议通过例子进行理解，理解他有什么具体的作用定义BFC 全称为块格式化上下文 (Block Formatting Context) 。官方定义：一个块格式化上下文（block formatting context）是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。元素变为BFC的条件根元素或其它包含它的元素浮...
复制链接

扫一扫

专栏目录