CSS中的BFC（块级格式化上下文）

最新推荐文章于 2023-02-12 12:04:07 发布
最新推荐文章于 2023-02-12 12:04:07 发布
阅读量285 收藏
点赞数
分类专栏： CSS 文章标签： BFC

什么是 BFC

简单的说，BFC就是一个块级容器，就好比一个div中装着其他东西：更多的div或者a标签、p标签等。

一些常见情况

Case1：浮动问题

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
        .container {
            background-color: cornflowerblue;
        }

        .child {
            width: 50px;
            height: 50px;
            background-color: lightgreen;
            border: solid 1px gray;
            box-sizing: border-box; /*让width的宽度加上border的宽度是50px*/
            float: left;
        }
        .otherDiv{
            width: 150px;
            height: 100px;
            background-color: lightpink;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="child"></div>
    <div class="child"></div>
</div>
<div class="otherDiv">
</div>
</body>
</html>
container应该包裹两个绿色盒子，而container和otherDiv应该是同级别的，却被接到了绿色盒子开始位置。
说明container的高度应该是0，也就是绿色盒子的容器高度并没有被绿色盒子撑开，我们一般给container设置
一些别的属性来清除浮动
1.给container里面再加一个元素，并设置clear：both
2.让container生成BFC，其高度让子元素参与计算

这里写图片描述

  我们这里这么做，设置container的样式添加一句

.container {
    background-color: cornflowerblue;
    overflow: hidden;            
}
  然后container被撑开，高度有了，也不需要往里面加一个元素来清除浮动，设置overflow为hidden就可以了
  （宽度很长是因为继承的是100%）

这里写图片描述

Case2：margin重叠，发生在垂直方向上

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
        .container {
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            margin-bottom: 100px;
        }
        .otherDiv {
            width: 100px;
            height: 100px;
            background-color: lightpink;
            margin-top: 50px;
        }
    </style>
</head>
<body>
<div class="container"></div>
<div class="otherDiv"></div>
</body>
</html>
蓝色块块的底部外边距为100px，粉色的顶部外边距为50px
我们想要的是他们相隔150px，但是效果确实只有100px，
他们两个的最大值成为了最终结果
我们给粉色块块套一个div并让这个div生成BFC（恩。。。就是设置一些overflow为hidden）

这里写图片描述

    结果编程这样了，因为BFC内部的元素和外部的元素互不干扰

这里写图片描述

继续

那么说了这两种情况和解决方式之后，我们继续说BFC。
就是一个容器，让他里面的东西和外面的东西不干扰。
生成BFC的情况：

  • 元素是根元素（html这个标签）
  • float不为none
  • 定位（position）是绝对定位（absolute）或者固定定位（fixed）
  • display为inline-block, table-cell, table-caption, flex, inline-flex（就是块级盒子啦）
  • overflow不为visible（这个我们刚才一直在用的呀）

BFC的布局规则：

  • 内部的Box会在垂直方向，一个接一个地放置。
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  • 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  • BFC的区域不会与float box重叠。
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  • 计算BFC的高度时，浮动元素也参与计算

内容来源

（前端精选文摘：BFC 神奇背后的原理）http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
作者：梦想天空

Ton_One
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
块级格式化上下文（Block Formatting Context）
letterTiger的博客
02-05 1176
CSS块级格式化上下文是块级盒子的一种能力，这种能力并不是直接通过css属性声明而获得的，而是添加css的一部分相关属性之后自动获得的能力，也就是说没有一个明确的属性就是生成块级格式化上下文的。 块级格式化上下文的能力就是让具有该能力的盒子可以隔绝盒子内外的环境，盒子内部的布局不会影响到盒子外部，同样盒子外部也不会影响到盒子内部。 那么，没有格式化上下文的盒子怎么样才能被盒子外部影响或者说怎么...
BFC块级格式化上下文
ct5211314的博客
03-20 446
1.一个BFC区域只包含其子元素，不包括其子元素的子元素。2.并不是所有的元素都能成为一块BFC区域，只有当这个元素满足条件的时候才会成为一块BFC区域。3.不同的BFC区域之间是相互独立的，互不影响的。利用这个特性我们可以让不同BFC区域之间的布局不产生影响。
CSS：块格式化上下文(BFC)
前端御书房
02-12 605
块格式化上下文是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
BFC（块级格式化上下文）
小多的博客
05-28 927
BFC(Block formatting context) 直译为：块级格式化上下文 它是一个独立的渲染区域，只有块级盒子(Block-level box)参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干 元素的显示模式 我们前面讲过 元素的显示模式 display。 分为 块级元素 行内元素 行内块元素 ，其实它还有很多其他显示模式。 哪些元素会具有BFC的条件 不是所有的元素模式都能产生BFC，w3c 规范： display 属性为 block, list
深入理解块级格式化上下文(BFC)
白日梦先生的博客
03-30 4190
一、 什么是BFC 块级格式化上下文，Block Formatting Context，也就是常说的BFC，它是Web页面的可视化CSS渲染区域的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。 BFC的布局规则如下： 内部的盒子会在垂直方向，一个一个地放置 BFC是页面上的一个隔离的独立容器 属于同一个BFC的两个相邻Box的上下margin会发生重叠 计算...
CSS理解块级格式上下文（BFC）
09-24
【CSS理解块级格式上下文（BFC）】 在CSS布局中，Block Formatting Context（BFC）是一个至关重要的概念，它决定了元素内部块级元素的布局方式，同时保证了这个区域与外部元素的布局互不影响。BFC可以看作是一个...
10分钟理解CSS BFC原理及其应用
09-27
CSS BFC（Block Formatting Context，块级格式化上下文）是Web页面布局中的一个重要概念，它定义了一个独立的渲染区域，具有自己特定的布局规则。理解BFC的原理对于解决CSS布局问题和优化页面样式有着重要作用。 ...
CSS布局基础BFC
01-21
但是它的重要性确是杠杠的，可以这么说，没有它就就没有什么css布局 BFC,全称 Block Formatting Context，翻译成块级格式化上下文，它就是一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素...
浅析CSS里的BFC和IFC的用法
01-19
前言 之前一直听到有人提到 CSS里的BFC，正巧在 IFE的练习里遇到了外边距折叠的问题，所以正好弄清楚BFC的机制。...而 Block Formatting Contexts (BFC，块级格式化上下文)，就是 一个块级元素 的渲染显示
关于对CSS中BFC (块级格式化上下文) 的理解
yuliying的专栏
01-06 1963
转自: https://www.thinktxt.com/web-front/2017/02/18/css-bfc-layout-model.html 也许你已经掌握了HTML、CSS的基本布局技能，但是有可能还有一些难以琢磨透的专业名词还不是很清楚，比如BFC。今天我们就来聊聊对BFC的理解，以便我们在布局的过程中能够更加得心应手。 概念 BFC(Block Formatt
SDN-bigswitch的BCF解决方案
08-01
SDN（Software Defined Network）即软件定义网络，是一种网络设计理念，或者一种推倒重来的设计思想。 只要网络硬件可以集中式软件管理，可编程化，控制转发层面分开，则可以认为这个网络是一个SDN网络。 所以说，SDN并不是一个具体的技术，不是一个具体的协议，而是一个思想、一个框架。狭义的SDN是指的“软件定义网络”， 广义的SDN的概念还延伸出了：软件定义安全、软件定义存储等等。可以说，SDN是一个浪潮，席卷整个IT产业。 信息中心化是对传统网络的一大挑战。Internet的前身，ARPANET，在创建之初就有一个前提：这个网络是个自制的， 无中心的系统，网络遭受任何局部损失都不会影响其他部分的正常通讯。所以，所有的RFC都围绕着这个前提来构建， 所有的网络设备也遵循着这一前提来研发。但是SDN将这一前提打破。所谓天下合久必分，分久必合。网络世界也不能免俗。 锐捷网络也不落时代地加入这一潮流中。Cloud computing引发的互联网革命新浪潮将计算和存储中心化，SDN顺应了这一趋势。 通过硬件，软件平台的支持，信息（网络状态）被共享到一个逻辑上集中的中心。相对于去中心化的传统网络，SDN带来很多很多优势。 SDN在各国企业中已被广泛涉及，Nick教授团队的创业公司屡屡付诸实践，国内团队在SDN中也有涉猎并不断追求发展，锐捷网络、 大河互联和盛科网络就是很好的例子。然而，国内技术尚不成熟，人才也相对缺乏，需要网络工程师潜心钻研。
css入门之块格式化上下文
蛐蛐的博客
03-13 625
文档：Block formatting context - Developer guides | MDN 1.简介 块格式化上下文是网页视觉 CSS 渲染的一部分。 它是块框布局发生的区域以及浮动与其他元素交互的区域。 2.定义 块格式化上下文由以下情况创建： 文档的根元素<html>。 浮动，float不是none的元素。 绝对定位的元素，position为absolute或fixed的元素。 内联块，display为inline-block 表格单元格，d
html5中的行高元素,css转化为行块元素 元素的高度、宽度、行高以及顶
weixin_36251052的博客
06-07 262
HTML中 块级元素 如何转为 行内元素??可以通过display: inline-block设置为行内元素。 步骤如下： 一、设计两个块级元素div，代码如下： 此时的块级元素显示效果： 二、设计两个块级元素div，添加属性 display:inline-block，代码如下： 此时的元素显示效果： 扩展资料div,块元素与内联元素怎么互相转化块元素怎么变内联元素内联转化为块状：display:...
CSS的两种格式化上下文：BFC和IFC
qq_22253617的博客
01-13 671
这篇文章具体介绍了CSS针对block-level元素和inline-level元素设计的两种格式化上下文：BFC(Block Formatting Context)和IFC(Inline Formatting Context)，它们规定了block-level元素和inline-level元素在对应格式化上下文中的渲染规则。
Css规范整理：3.2、常规流布局：块格式化上下文
02-10 143
常规流布局 块格式化上下文 其中关键概念有： 块级盒（block level box）：参与块格式化上下文的盒，即outer display type 为 block。 块容器盒（block container box）：可以建立块格式化上下文 的容器。 块盒（block box）：作为块容...
常见的解决bfc的方法
weixin_43553231的博客
03-24 2551
进阶篇—高级的css常见的问题# 标题 一.如何触发一个盒子的bfc： 1.//postion:absolute;----具体解释： postion:允许用户精确定义元素框出现的相对位置。可以是相对于它通常出现的位置，相对于其上级元素，相对于另一个元素，或者相对于浏览器视窗本身。 absolute: (1).当元素A的父对象设置了position属性，且position的属性值为absolute或...
CSS布局深入简出——细谈块格式化上下文（BFC）
weixin_44542562的博客
07-12 636
一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。 一个块格式化上下文由以下之一创建： 根元素或其它包含它的元素 浮动元素 (元素的 float 不是 none) 绝对定位元素 (元素具有 position 为 absolute 或 fixed) 内联块 (元素具有 display: inline-block) 表格单元格 (元素具有 display: table-cell，HTML表格
浅析BFC原理及作用
热门推荐
杜小白的博客
05-21 1万+
一、常见布局模式在讲BFC之前，我们先来看一下常见的CSS三种布局模型：CSS中的三种布局模型：流动模型（Flow）、浮动模型（Float）和层模型（Layer）。详解在我的另一篇博文中讲到，CSS中的三种布局模型。二、BFC概念 BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述布局模式的流动模型。是W3C CSS2.1规范中的一个概念，决定了...
CSS 定位规则之 BFC
weixin_30918633的博客
07-24 114
1. BFC(block formatting context,中文常译为块级格式化上下文)是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。在进行盒子元素布局的时候， BFC 提供了一个环境， 在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成 BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动...
如何创建块级格式化上下
最新发布
05-13
块级格式化上下文（Block Formatting Context，BFC）是一个 Web 页面渲染的基本概念之一，它是一个独立的渲染区域，具有一定的布局规则，可以包含浮动元素，并且可以防止外部元素的影响。 要创建一个BFC，可以按照以下方法中的任意一种来实现： 1.使用display属性为inline-block、table-cell、table-caption、flex、grid、flow-root等。 ```css div { display: inline-block; /* 或者使用其他属性值 */ } ``` 2.使用position属性为absolute或fixed。 ```css div { position: absolute; /* 或者使用fixed */ } ``` 3.使用float属性为left或right。 ```css div { float: left; /* 或者使用right */ } ``` 4.使用overflow属性为hidden、scroll或auto。 ```css div { overflow: hidden; /* 或者使用scroll或auto */ } ``` 通过上述方法，可以创建一个独立的渲染区域，使得布局更加灵活，元素之间不会产生意外的交互影响。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值