CSS BFC 块格式化上下文

最新推荐文章于 2024-06-13 18:31:56 发布
最新推荐文章于 2024-06-13 18:31:56 发布
阅读量68 收藏
点赞数 1
分类专栏： CSS 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64522330/article/details/124534421
版权

 BFC    块格式化上下文

是web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素的交互区域

创建BFC 方法: 1. html标签是BFC盒子

                         2. 浮动元素是BFC盒子

                         3. 行内块元素是BFC盒子

                         4. overflow属性取值不为visible，如：auto,hidden...

BFC  盒子特点： BFC盒子会默认包裹住内部子元素（标准流，浮动）  应用：清除浮动

                  BFC盒子本身与子元素之间不存在margin 的塌陷现象     应用：解决margin 塌陷现象

Wu-wenhao
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
BFC：块状格式化上下文
weixin_44196299的博客
08-13 249
一、什么是BFC BFC的全称是块状格式化上下文，MDN中对于对于BFC的定义如下： 一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。 个人理解BFC是一块独立渲染区域，这个区域它规定了区域内如何进行布局，并且与区域外部毫无关系，因此区域内部无论如何采用何种布局都不会对区域...
CSS理解块级格式上下文（BFC）
09-24
BFC(Block formatting context)直译为"块级格式化上下文"。它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干.接下来通过本文给大家介绍CSS理解块级格式上下文（BFC）的相关知识，感兴趣的朋友...
【CSS】BFC 块级格式化上下文
小秀的博客
10-22 432
可以通俗的理解为 BFC 就是一个功能，创建了 BFC 就相当于开启了这个功能。元素开启 BFC 后，其子元素不会再产生 margin 塌陷问题。元素开启 BFC 后，自己不会被其他浮动元素所覆盖。元素开启 BFC 后，就算其子元素浮动，元素自身高度也不会塌陷。根元素浮动元素绝对定位、固定定位的元素行内块元素表格单元格： table、thead、tbody、tfoot、th、td、tr、captionoverflow 的值不为 visible 的块元素（相对来说影响小些）
css之BFC块级格式化上下文
low666的博客
04-08 512
css之BFC块级格式化上下文 BFC 定义 BFC（块级格式化上下文），一个创建了新的BFC的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题 BFC是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素作用。 ...
CSS：块格式化上下文(BFC)
前端御书房
02-12 591
块格式化上下文是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
BFC块级格式化上下文
ct5211314的博客
03-20 439
1.一个BFC区域只包含其子元素，不包括其子元素的子元素。2.并不是所有的元素都能成为一块BFC区域，只有当这个元素满足条件的时候才会成为一块BFC区域。3.不同的BFC区域之间是相互独立的，互不影响的。利用这个特性我们可以让不同BFC区域之间的布局不产生影响。
CSS块级格式化上下文（BFC）
qq_61716556的博客
12-06 193
定义 视觉格式化模型中规定了块级格式化上下文（Block Formatting Context）简称BFC。触发该效果的元素是一个独立的渲染区域。该区域常规流块盒与一般块盒略有不同。 不同点 常规流块盒在水平方向上必须撑满包含块。 常规流块盒在垂直方向上依次排列。 常规流块盒中盒子间若无其他元素则会发生外边距合并。 常规流块盒计算高度时无视浮动元素，排列时同样无视浮动元素。 BFC中 独立的渲染元素：不同BFC元素的渲染互不干扰，BFC元素内部的渲染不会影响到外部。 计算BFC块盒高度时.
CSS BFC 块级格式化上下文
林彬的专栏
06-08 176
BFC(Block formatting context) 直译为”块级格式化上下文”。 元素的显示模式 我们前面讲过 元素的显示模式 display。 分为 块级元素 行内元素 行内块元素 ，其实，它还有很多其他显示模式。 那些元素会具有BFC的条件 不是所有的元素模式都能产生BFC，w3c 规范： display 属性为 block, list-item, table 的元素，会产生BFC....
BFC--块级格式化上下文
weixin_43581952的博客
09-28 9079
BFC(Block formatting context) （1）概念： 直译为块级格式化上下文，把BFC理解成一块独立的渲染区域，BFC看成是元素的一种属性， 当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素. ·我理解为：将BFC看成是一种属性，当拥有该属性的元素就相当于一块独立的区域。 （2）实现BFC属性的方法： 1. 浮动元素，float 除 none 以外的值 2. 定位元素，position的值不是stati...
Css面试题：BFC（格式化上下文）
lalala_dxf的博客
09-21 459
一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，BFC是一块块独立的渲染区域，可以将BFC看成是元素的一种属性，拥有了这种属性的元素就会使得他的子元素与世隔绝，不会影响到外部其他元素。举个例子：
CSS布局基础BFC
01-21
但是它的重要性确是杠杠的，可以这么说，没有它就就没有什么css布局 BFC,全称 Block Formatting Context，翻译成块级格式化上下文，它就是一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素...
浅析CSS里的BFC和IFC的用法
01-19
前言 之前一直听到有人提到 CSS里的BFC，正巧在 IFE的练习里遇到了外边距折叠的问题，所以正好弄清楚BFC的机制。...而 Block Formatting Contexts (BFC，块级格式化上下文)，就是 一个块级元素 的渲染显示
什么是BFC？ CSS 使用伪元素清除浮动的方法
12-13
　块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。 我们先了解一个名词：BFC（block formatting context），中文为“块级格式化上下文”。 先...
css设置滚动条样式；滚动条设置透明
i_am_a_div的博客
06-12 262
css设置滚动条样式；滚动条设置透明
css实现多行文本的展开收起
我码玄黄的博客
06-12 1045
本文通过纯CSS实现多行文本展开收起效果，包括右下角环绕按钮、状态切换及文本行数判断。利用flex布局、input与label关联、伪元素生成等技术，解决展开收起按钮的显示与隐藏问题，实现动态高度和状态切换。
CSS中，设置 0.5px 会生效吗
Keep trying, keep going
06-12 377
在高分辨率屏幕（例如 Retina 屏幕）上，0.5px 的设置通常会生效，因为这些屏幕具有更高的像素密度，可以显示更细的细节。在这些设备上，1 个 CSS 像素可能对应多个设备像素，因此可以实现 0.5px 的效果。，因为这些屏幕的像素密度较低，可能无法精确地显示半个像素的大小。在这种情况下，浏览器会对 0.5px 的值进行。在 CSS 中，设置 0.5px 是有效的，浏览器会尝试渲染出这种细微的大小差异。然而，在低分辨率屏幕上，0.5px 的设置可能无法完美呈现。
CSS 字体颜色渐变
最新发布
weixin_47981445的博客
06-13 160
CSS 字体颜色渐变，适配多端展示
【Css】纯css展开、收起超出的文本
此人太懒，没有任何简介
06-13 418
* 颜色必须与背景相同 *//* 超过的行数隐藏 *//* 和文本大小一样 */
如何创建块级格式化上下
05-13
块级格式化上下文（Block Formatting Context，BFC）是一个 Web 页面渲染的基本概念之一，它是一个独立的渲染区域，具有一定的布局规则，可以包含浮动元素，并且可以防止外部元素的影响。 要创建一个BFC，可以按照...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Wu-wenhao

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值