BFC(块级格式化上下文)——清除浮动的原理，边距坍塌的原理

AwesomeCPA

于 2020-09-07 15:53:29 发布

阅读量559

点赞数

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/cpa0701/article/details/108449549

版权

前端专栏收录该内容

78 篇文章 4 订阅

订阅专栏

BFC到底是什么？

简单的来说：BFC就是一个css的一个布局概念，是一个独立的区域，是一个环境。

文档流

说BFC之前先说说文档流，文档流分为：浮动流、定位流、普通的标准流，而普通标准流其实就是BFC中的FC。

FC：formatting context的英文缩写，翻译过来就是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及与元素之间的关系和作用。

常见的FC：BFC(块级格式化上下文)、IFC(行级格式上下文)、GFC(网络布局格式上下文)、和FFC(自适应格式上下文)。

BFC的定义

BFC（Block formatting context ）“块级格式上下文”。是用于布局块级盒子的一块渲染区域。并且与这个区域的外部毫无关系。

触发BFC的条件

满足下列条件之一就可以触发BFC

1：根元素，即html元素
2：float的值不为none
3：overflow的值不为visible
4：display的值为inline-block、inline-flex、flex、flow-root、table-caption、table-cell。
5：position的值为absolute或者fixed

BFC的作用

BFC是页面独立的一个容器，与外界的毫无关系。
与不同容器的区别是：

1. 可以阻止元素被浮动的元素覆盖（可做两栏布局自适应）

绿色盒子浮动遮挡了红色盒子
在这里插入图片描述

触发红色盒子的BFC，可防止被绿色盒子遮挡
在这里插入图片描述

  <style>
        *{
            padding:0;
            margin :0;
        }
        .box {
            width: 400px;
            height: 100px;
            margin: 0  auto;
        }
        .green {
            width: 100px;
            height: 50px;
            float: left;
            background-color: green;
        }
        .red {
            width: 200px;
            height: 100px;
            /* float: left; */
            /* display: inline-block; */
            /* display: table-cell; */
            /* overflow: hidden; */
            /* position: absolute; */
            /* position: fixed; */
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="green"></div>
        <div class="red">BFC</div>
    </div>
</body>

2: 可以包含浮动的元素—清除浮动

说明：我们知道当浮动的盒子的父元素没有高度时，会出现高度塌陷现象。

绿盒子设置浮动前，父盒子被撑开高度：
在这里插入图片描述
绿盒子设置浮动后，父盒子高度塌陷：

父盒子触发BFC可以解决这个问题。

 <style>
        .box {
            width: 200px;
            border: 1px solid #ccc;
            overflow：hidden；
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son"></div>
    </div>
</body>

3.解决同一个BFC区域的垂直方向margin塌陷的问题

属于同一个BFC的两个相邻的box的margin会重叠，以大的为主。要想解决这个问题，可以将两个盒子分为不同的BFC中。

在同一个BFC中时：
在这里插入图片描述 .分为两个不同的BFC之后：

 <style>
        .green {
            width: 200px;
            height: 100px;
            margin-bottom: 20px;
            background-color: green;
        }
        .red {
            width: 200px;
            height: 100px;
            margin-top: 30px;
            background-color: red;
        }
        .box {
            overflow: hidden;

        } 
        .main {
            width: 300px;
            height: 250px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
        <div class="main">
            <div class="green"></div>
            <div class="box">
                <div class="red">BFC</div>
            </div>
        </div>   
</body>

AwesomeCPA

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BFC(块级格式化上下文)——清除浮动的原理，边距坍塌的原理

目录●BFC到底是什么？●文档流●BFC的定义●触发BFC的条件●BFC的作用1. 可以阻止元素被浮动的元素覆盖（可做两栏布局自适应）2: 可以包含浮动的元素—清除浮动3.解决同一个BFC区域的垂直方向margin塌陷的问题●BFC到底是什么？简单的来说：BFC就是一个css的一个布局概念，是一个独立的区域，是一个环境。●文档流说BFC之前先说说文档流，文档流分为：浮动流、定位流、普通的标准流，而普通标准流其实就是BFC中的FC。FC：formatting context的英文缩写，翻译过来就是格
复制链接

扫一扫

专栏目录