BFC(Block Formatting Context) 块级格式化上下文

最新推荐文章于 2024-03-10 15:58:23 发布
最新推荐文章于 2024-03-10 15:58:23 发布
阅读量94 收藏
点赞数
分类专栏： CSS 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hskjshs/article/details/115381711
版权

BFC(Block Formatting Context) 块级格式化上下文

  • BFC就好像标签的一个属性，可以使一个区域具有独立渲染不影响其他区域的特性。

BFC常用的几个方式

  • float属性不为none
  • overflow属性不为visible
  • position属性为absolute或fixed
  • display属性为inline-block
  • contain值为layout、content、或paint
  • 多列容器

BFC的用处

  • 避免外边距重叠
  • 清除浮动
  • 阻止元素被浮动元素覆盖
Lmx!
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BFC的布局规则
Startwithablank的博客
03-01 5386
在起初我们做网页应该还没彻底了解，到底是怎么进行一个布局，在我们头脑中布局应该分为三部分，头，中，尾三部分，这样理解也没有错，但是我们所有的布局都是会遵循BFC布局为标准。 今天来展示一下BFC布局的详细情况： BFC是怎样形成的 BFC的布局规则： 1、内部的Box会在垂直方向, 一个接-个地放置。 2、Box垂直方向的距离由margin决定。属于同-一个BFC的两个相邻Box的ma...
说一说BFC
m0_51221372的博客
04-16 597
BFC 定义、布局规则、如何创建BFC、BFC的作用
BFC 触发规则: 解决高度塌陷，外边距重叠，用于左右布局，双飞翼布局
qq_60839348的博客
11-21 721
BFC 布局规则，触发规则，解决高度塌陷，外边距重叠，用于左右布局，双飞翼布局
被忽略的BFC
罗小黑
08-20 235
什么是BFC BFC（Block formatting context）译为“格式快上下文”，是一个独立渲染区域，规定了内部的子元素如何布局，并且与这个区域外部的关系。 什么情况下会产生BFC 根元素（注意：这里必须手动设置，默认不触发BFC） float属性不为none position为absolute或fixed display为inline-block、table-cell、tab...
什么是BFC？BFC的原理是什么？BFC的应用
tyxjolin的专栏
03-31 1113
在上面的代码中，我们首先使用clearfix hack来清除子元素的浮动，然后将父元素的overflow属性设置为hidden，以生成一个BFC来避免子元素的浮动影响到父元素的布局。在上面的代码中，我们将左栏设置为浮动元素，然后将右栏的overflow属性设置为hidden，以创建一个BFC，从而避免了左栏的浮动影响到右栏的布局。在BFC中，浮动元素会被包裹在BFC的内部，不会影响到BFC外部的元素的布局。在BFC中，浮动元素会被包裹在BFC的内部，不会影响到BFC外部的元素的布局。
CSS理解块级格式上下文（BFC）
09-24
【CSS理解块级格式上下文（BFC）】 在CSS布局中，Block Formatting Context（BFC）是一个至关重要的概念，它决定了元素内部块级元素的布局方式，同时保证了这个区域与外部元素的布局互不影响。BFC可以看作是一个...
css布局之BFC模式（block formatting context）
01-19
官方给出的BFC解释是这样的，浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级...
什么是BFC？ CSS 使用伪元素清除浮动的方法
12-13
我们先了解一个名词：BFC（block formatting context），中文为“块级格式化上下文”。 先记住一个原则： 如果一个元素具有BFC,那么内部元素再怎么翻江倒海，翻云覆雨，都不会影响外面的元素。所以，BFC元素是不可能...
浅析CSS里的BFC和IFC的用法
01-19
前言 之前一直听到有人提到 CSS里的BFC，正巧在 IFE的练习里遇到了外边距折叠的问题，所以正好弄清楚BFC的机制。...而 Block Formatting Contexts (BFC，块级格式化上下文)，就是 一个块级元素 的渲染显示
BFC知识总结
qq_41716992的博客
02-03 498
BFC的概念以及应用
css的布局（BFC）
sinat_34896766的博客
02-09 1575
使用了BFC相当于加了容器隔离，使BFC内部的元素与外部元素在布局上互不影响通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。c、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。d、 BFC的区域会计算盒子到父盒子margin-top的距离。a、BFC的区域不会与 float的元素区域重叠。b、计算BFC的高度时，浮动子元素也参与计算。元素首先按照普通流的位置出现， 然后根据浮动的方向尽可能的向左或向右偏移。
BFC布局
韩旭不会敲代码吧的博客
07-29 486
1、BFC的定义 我们常说的文档流分为普通流、浮动流与定位流三种。 FC(formatting context格式化上下文)，指的是一块渲染区域，依靠渲染规则，决定其子元素如何布局及与其他元素的关系和作用。 FC分为BFC、IFC、GFC和FFC，其中BFC(block formatting context)块级格式化上下文 BFC可以简单的理解为某个元素的一个css属性，只不过这个属性不能被开发者显式的修改，拥有这个属性的元素对内部元素和外部元素会表现出一些特性，这就是BFC。 2、BFC的特点 1.内部
BFC：盒模型布局的黄金法则
最新发布
你若盛开，清风自来
03-10 871
本文将详细介绍BFC（块级格式化上下文）的概念、特点、产生原因以及在CSS布局中的应用案例，帮助您掌握这一关键布局机制。🎉 BFC是CSS布局中的一个重要概念，它决定了元素如何相互作用和排列。通过了解BFC的概念、特点、产生原因以及应用案例，我们可以更好地利用BFC解决页面布局中的问题，实现更加精确的页面设计。
BFC是什么？如何触发BFC？（实现两栏/三栏布局）
weixin_56180673的博客
10-29 1305
BFC是什么？如何触发？两栏/三栏布局如何实现？
CSS浮动布局以及BFC布局的介绍
叶子yes的博客
07-23 374
标准流也称为文档流或者普通流。标准流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在标准流中。浏览器默认的排版方式就是标准流的排版方式。在标准流中有两种排版方式,一种是垂直排版,一种是水平排版垂直排版,如果元素是块级元素,那么就会垂直排版；水平排版,如果元素是行内元素或者行内块级元素,那么就会水平排版。...
CSS中的BFC详解（两栏布局和三栏布局）
weixin_45432334的博客
10-09 1472
一、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 347
css中BFC规则何为BFCBFC规则 何为BFC BFC（Block formatting context）直译为“块级格式上下文”。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level box如何布局，并且与这个区域外部毫不相干。 BFC规则 1、内部的box会在垂直方向，一个接一个的放置。 2、box垂直方向的距离由margin决定。属于统一个...
如何创建块级格式化上下
05-13
块级格式化上下文（Block Formatting Context，BFC）是一个 Web 页面渲染的基本概念之一，它是一个独立的渲染区域，具有一定的布局规则，可以包含浮动元素，并且可以防止外部元素的影响。 要创建一个BFC，可以按照...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值