吃透BFC

最新推荐文章于 2023-04-16 18:03:18 发布
最新推荐文章于 2023-04-16 18:03:18 发布
阅读量128 收藏
点赞数
分类专栏： css/sass/less
本文为博主[pan-zy]原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/sd4015700/article/details/118512000
版权

相关术语

三种布局手段: 标准流(normal), 浮动流(float)，定位流(position)
BFC: Block Formatting Context, 块级格式化上下文

一、BFC的特点

1. 在BFC区域内只包含其直接子元素, 不包含孙元素以及更下级元素

<div class="bfc-01">
    <div class="box-01"></div>
    <div class="box-02"></div>
    <div class="box-03"></div>
    <div class="box-04 bfc-02">
        <div class="box-05"></div>
        <div class="box-06"></div>
    </div>
</div>

如上代码, 包含两个BFC区块, bfc-01,bfc-02, bfc-01的区块只包含box-01,box-02,box-03, box-04, 而box-05,box-06是不包含在bfc-01中的, box-05, box-06属于bfc-02

2. 具有 BFC 特性的元素可以看作是隔离了的独立容器, 容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

二、BFC触发条件

触发BFC必须满足以下条件之一

  • 是body元素
  • 设置浮动float(除none之外的值)
  • 设置定位position为: absolute, fixed
  • 设置overflow为: hidden, auto, scroll
  • 设置display为: flex,table-cell ,inline-block
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BFC测试</title>
    <style>
        .bfc-01{
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="bfc-01">
    <div class="box-01"></div>
    <div class="box-02"></div>
    <div class="box-03"></div>
    <div class="box-04 bfc-02">
        <div class="box-05"></div>
        <div class="box-06"></div>
    </div>
</div>
</body>
</html>

如上代码，有两个BFC区域:body, bfc-01
body是因为满足body条件
bfc-01是因为满足:overflow:hidden条件
注意: bfc-02并不是BFC区块, 因为不满足BFC的任意条件

BFC可解决的问题

1. 外边距坍塌问题(垂直方向上坍塌)

问题重现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BFC测试</title>
    <style>
        .box-01, .box-02 {
            width: 300px;
            height: 300px;
            margin: 30px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
<div class="box-01"></div>
<div class="box-02"></div>
</body>
</html>

在这里插入图片描述
使用BFC解决

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BFC测试</title>
    <style>
        .box-01, .box-02 {
            width: 300px;
            height: 300px;
            margin: 30px;
            background-color: lightblue;
        }
        .bfc-fix{
            /*满足bfc的触发条件之一，使得这个盒子变成一个bfc区块*/
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="bfc-fix">
    <div class="box-01"></div>
</div>
<div class="bfc-fix">
    <div class="box-02"></div>
</div>
</body>
</html>

在这里插入图片描述

2. 包含坍塌

问题重现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BFC测试</title>
    <style>
        .parent{
            width: 300px;
            height: 300px;
            background-color: lightblue;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: lavender;
            margin-top:100px;
        }
    </style>
</head>
<body>
<div class="parent">
    <!--
        child设置了margin-top:100px, 预期的效果是child到parent的上外边距为100px，
        而实际上的效果变成了parent距离body的外边距为100px, 内部元素的布局影响到了外部元素
    -->
    <div class="child"></div>
</div>
</body>
</html>

在这里插入图片描述

使用BFC解决

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BFC测试</title>
    <style>
        .parent{
            width: 300px;
            height: 300px;
            background-color: lightblue;
            /*触发parent的bfc*/
            overflow: hidden;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: lavender;
            margin-top:100px;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
</div>
</body>
</html>

在这里插入图片描述

3.使用BFC清除浮动影响

问题重现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BFC测试</title>
    <style>
        .parent{
            width: 300px;
            height: 400px;
            background-color: lightblue;
        }
        .child-01{
            width: 100px;
            height: 300px;
            background-color: lavender;
            float:left;
        }
        .child-02{
            height: 400px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child-01"></div>
    <div class="child-02"></div>
</div>
</body>
</html>

在这里插入图片描述

BFC解决

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BFC测试</title>
    <style>
        .parent{
            width: 300px;
            height: 400px;
            background-color: lightblue;
        }
        .child-01{
            width: 100px;
            height: 300px;
            background-color: lavender;
            float:left;
        }
        .child-02{
            height: 400px;
            background-color: lightcoral;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child-01"></div>
    <div class="child-02"></div>
</div>
</body>
</html>

在这里插入图片描述

问题重现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BFC测试</title>
    <style>
        .parent{
            width: 300px;
            background-color: lightblue;
        }
        .child{
            float:left;
            width: 100px;
            height: 100px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>
</body>
</html>

在这里插入图片描述
问题解决

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BFC测试</title>
    <style>
        .parent{
            width: 300px;
            background-color: lightblue;
            overflow: hidden;
        }
        .child{
            float:left;
            width: 100px;
            height: 100px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>
</body>
</html>

在这里插入图片描述

参考文章

10 分钟理解 BFC 原理

「已注销」
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML-bfc初探
08-03
HTML-bfc初探
BFC的布局规则
Startwithablank的博客
03-01 5369
在起初我们做网页应该还没彻底了解，到底是怎么进行一个布局，在我们头脑中布局应该分为三部分，头，中，尾三部分，这样理解也没有错，但是我们所有的布局都是会遵循BFC布局为标准。 今天来展示一下BFC布局的详细情况： BFC是怎样形成的 BFC的布局规则： 1、内部的Box会在垂直方向, 一个接-个地放置。 2、Box垂直方向的距离由margin决定。属于同-一个BFC的两个相邻Box的ma...
说一说BFC
m0_51221372的博客
04-16 578
BFC 定义、布局规则、如何创建BFC、BFC的作用
BFC 触发规则: 解决高度塌陷，外边距重叠，用于左右布局，双飞翼布局
qq_60839348的博客
11-21 694
BFC 布局规则，触发规则，解决高度塌陷，外边距重叠，用于左右布局，双飞翼布局
被忽略的BFC
罗小黑
08-20 225
什么是BFC BFC（Block formatting context）译为“格式快上下文”，是一个独立渲染区域，规定了内部的子元素如何布局，并且与这个区域外部的关系。 什么情况下会产生BFC 根元素（注意：这里必须手动设置，默认不触发BFC） float属性不为none position为absolute或fixed display为inline-block、table-cell、tab...
什么是BFC？BFC的原理是什么？BFC的应用
tyxjolin的专栏
03-31 1046
在上面的代码中，我们首先使用clearfix hack来清除子元素的浮动，然后将父元素的overflow属性设置为hidden，以生成一个BFC来避免子元素的浮动影响到父元素的布局。在上面的代码中，我们将左栏设置为浮动元素，然后将右栏的overflow属性设置为hidden，以创建一个BFC，从而避免了左栏的浮动影响到右栏的布局。在BFC中，浮动元素会被包裹在BFC的内部，不会影响到BFC外部的元素的布局。在BFC中，浮动元素会被包裹在BFC的内部，不会影响到BFC外部的元素的布局。
BFC实现自适应两栏布局
01-20
回想第一次听到BFC的时候，是在解释为什么高度塌陷可以用overflow:hidden;等方法来解决的时候，当时BFC对我来说还是一个陌生的概念。在解决高度塌陷的问题的时候，通过BFC的触发条件之一触发BFC后，在计算BFC的高度...
BFC图片批量水印工具
08-20
这是一个可以对选中的图片文件添加水印的小程序，操作非常简单，但功能还是比较强大的，批量处理图片的速度也非常快。同时具备强大的字体特效处理功能。
10分钟理解CSS BFC原理及其应用
09-27
主要介绍了10分钟理解BFC原理及其应用的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
bfc的详细介绍以及大总结
01-17
BFC详细介绍BFC详细介绍
BFC知识总结
qq_41716992的博客
02-03 487
BFC的概念以及应用
BFC布局
韩旭不会敲代码吧的博客
07-29 469
1、BFC的定义 我们常说的文档流分为普通流、浮动流与定位流三种。 FC(formatting context格式化上下文)，指的是一块渲染区域，依靠渲染规则，决定其子元素如何布局及与其他元素的关系和作用。 FC分为BFC、IFC、GFC和FFC，其中BFC(block formatting context)块级格式化上下文 BFC可以简单的理解为某个元素的一个css属性，只不过这个属性不能被开发者显式的修改，拥有这个属性的元素对内部元素和外部元素会表现出一些特性，这就是BFC。 2、BFC的特点 1.内部
BFC是什么？如何触发BFC？（实现两栏/三栏布局）
weixin_56180673的博客
10-29 1268
BFC是什么？如何触发？两栏/三栏布局如何实现？
CSS浮动布局以及BFC布局的介绍
叶子yes的博客
07-23 345
标准流也称为文档流或者普通流。标准流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在标准流中。浏览器默认的排版方式就是标准流的排版方式。在标准流中有两种排版方式,一种是垂直排版,一种是水平排版垂直排版,如果元素是块级元素,那么就会垂直排版；水平排版,如果元素是行内元素或者行内块级元素,那么就会水平排版。...
CSS中的BFC详解（两栏布局和三栏布局）
weixin_45432334的博客
10-09 1458
一、BFC介绍 BFC（Block fomatting context）“块级格式化上下文”。是Web页面中盒模型布局的CSS渲染模式，是一个独立的渲染区域，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 二、形成BFC的条件 1、根元素 2、float属性不为none 3、position为absolute或fixed 4、display为inline-blo...
BFC规则
小泽哥哥的博客
08-26 326
css中BFC规则何为BFCBFC规则 何为BFC BFC（Block formatting context）直译为“块级格式上下文”。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level box如何布局，并且与这个区域外部毫不相干。 BFC规则 1、内部的box会在垂直方向，一个接一个的放置。 2、box垂直方向的距离由margin决定。属于统一个...
什么时候使用BFC布局
最新发布
05-13
BFC（Block Formatting Context）布局是一种常用的布局方式，特别适用于处理浮动元素、清除浮动、防止 margin 重叠等问题。以下是一些常见情况下建议使用BFC布局的场景： 1. 处理浮动元素：当一个元素设置了浮动...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值